Vue 3 での注意点

vue.md

nuxt v3.0.0-rc.4時点

リアクティブ変数の.valueはtemplate内では浅い展開しかされない

template内でObjectネストされている場合などで .value を省く事は出来ない
vuejs/core/issues/5921

<script setup lang="ts">
import { toRefs, reactive } from 'vue';

const state = toRefs(reactive({
  array: [1, 2, 3, 4, 5],
  hoge: {
    piyo: 'piyopiyo',
  },
});
</script>

<template>
  <!-- NG -->
  {{ state.array[0] }} 
  {{ state.hoge.piyo }}
  <ul>
    <li v-for="x in state.array">
      {{ x }}
    </li>
  </ul>
  
  <!-- 明示的な.valueが必要 -->
  {{ state.array.value[0] }}
  {{ state.hoge.value.piyo }}
  <ul>
    <li v-for="x in state.array.value">
      {{ x }}
    </li>
  </ul>
</template>

新しいcomponentsをtemplateに追加した時はHMRされない

たぶんRC版だから、リリース版に期待 npmじゃなくyarnを使う