vueのcomposition apiを理解したい

正確にはNuxt(v2)ですが

zenn.dev

こちらの記事参考にして進めています。

github.com

進捗がこちら↑（○ロ注意）

まだ完全に理解はできていないので雰囲気だけですが、componentとロジックをめっちゃ分離できた感じがある。文章読むだけでは全くわからなかったがこれはよい！！！そして果たしてNuxt（Vue）なのかこれは？？？みたいな気持ちにもなりました。 this がなくなるのもステキだなって思いました。

<script>
import { defineComponent, ref, useContext } from '@nuxtjs/composition-api'
import Video from '~/components/Video.vue'
import { useTouchHandler } from '~/handler/TouchHandler.js'  // ハンドラを分離！

export default defineComponent({
  name: 'VideoList',
  components: { Video },
  setup() {
    const url = ref('')
    const like = ref(0)
    const { store } = useContext()  // this.$storeが返ってくる
    const { swipe, touchStart, touchMove, touchEnd } = useTouchHandler()

    return {
      store,
      swipe,
      touchStart,
      touchMove,
      touchEnd,
      url,
      like,
    }
  },
})
</script>

componentでuiを組み、ロジックは別スクリプトで用意して、つなぎこみやらまとめのサービスクラス的なやつの作り方を理解したら一旦設計の悩みは解決するんじゃなかろうかと思っている。あとTypeScriptやらなきゃ