How to access SFC data properties from the parent not using $refs in Vue v3?

I have this Vue 3 SFC

<template>
  <div>
    Home component
  </div>
</template>
<script>
  export default {
      name: 'Home',
      icon: 'house-icon'
  }
</script>

And I can access it's name & icon properties from the parent.

import Home from './Home.vue'

icon: {{Home.icon}}

How to achieve the same Vue.js way, using data(), setup() or <setup script>?

I have already tried

<script>
  export default {
      data() {
         return {
             icon: 'home-icon'
         }  
      }
  }
</script>

and

<script>
  export default {
      setup() {
         const icon = 'home-icon'
         const icon2 = ref('home-icon')
         const icon3 = computed(() => 'home-icon')
         return {
             icon, icon2, icon3 
         }  
      }
  }
</script>

and

<script setup>
    const icon = 'home-icon'
    const icon2 = ref('home-icon')
    defineExpose({
      icon,
      icon2
    })
</script>

Every time my Home component does not have any icon data I could access. No JS errors in the console.

Any ideas?

Here is the SFC Playground to play around

Component data is available on the component instance, not the exported component itself (which is a constructor of sorts). This applies to the Options API, to regular setup(), and to data in a <script setup> exposed via defineExpose (bindings created in <script setup> are not exposed by default; see the linked docs).

For the Options API or the Composition API with setup(), you can simply put them as properties in your default-exported object. For the Composition API with <script setup>, you can add a regular <script> block and default-export an object with them there.

Options API / setup():

<script>
export default {
  icon: 'home-icon',
  // data() or setup(), etc.
}
</script>

<script setup>:

<script setup>
// ...
</script>

<script>
export default {
  icon: 'home-icon',
}
</script>