typescript - Método de configuração não está sendo chamado

Eu criei um projeto inicial com vue ui (typescript, babel, linter). Tudo funciona bem, mas eu não consigo entender como fazer o método setup da Composition API funcionar. Ele simplesmente não está sendo chamado (a saída do log está vazia). É aqui que estou travado.

• vue: 3.0.0-rc.10

• vue-cli: 4.5.4

  <script lang="ts">
   import { Options, Vue } from 'vue-class-component'
   import HelloWorld from './components/HelloWorld.vue'
  
   @Options({
     components: {
       HelloWorld
     },
     setup () {
       console.log('SETUP HERE')
     }
   })
   export default class App extends Vue {
     setup () {
       console.log('SETUP THERE')
     }
   }
   </script>
  

Resposta #1

Você deve importar setup de vue-class-component e então usá-lo assim :

<template>
  <div>Count: {{ counter.count }}</div>
  <button @click="counter.increment()">+</button>
</template>

<script lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Vue, setup } from 'vue-class-component'

function useCounter () {
  const count = ref(0)

  function increment () {
    count.value++
  }

  onMounted(() => {
    console.log('onMounted')
  })

  return {
    count,
    increment
  }
}

export default class Counter extends Vue {
  counter = setup(() => useCounter())
}
</script>

para mais detalhes, por favor confira este problema

Resposta #2

Eu tive o mesmo problema e ele foi causado por estender o componente filho. A API de composição (método setup) nunca é chamada se você estender o componente. Enquanto os hooks do ciclo de vida da API de opções são chamados em ambos os componentes.

// child.js

<script>
import { onMounted } from "vue";

export default {
  name: "ChildComponent",
  setup() {
    console.log('Child - setup()');
    onMounted(() => {
      console.log('Child - mounted (composition API)');
    })
  },
  mounted() {
    console.log('Child - mounted (option API)');
  }
}
</script>

// parent.js

<script>
import ChildComponent from "./child.js";
import { onMounted } from "vue";

export default {
  name: "ParentComponent",
  extends: ChildComponent,
  setup() {
    console.log('Parent - setup()');
    onMounted(() => {
      console.log('Parent - mounted (composition API)');
    })
  },
  mounted() {
    console.log('Parent - mounted (option API)');
  }
}
</script>

SAÍDA

Parent - setup()
Parent - mounted (composition API)
Child - mounted (option API)
Parent - mounted (option API)