nuxt v3.0.0-rc.4時点
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>
たぶんRC版だから、リリース版に期待
npmじゃなくyarnを使う