useContextで取ったstoreのstateをtemplateで参照するとエラー

仕事でも趣味でもVueアプリケーションのテスト書いてるんだけど、趣味の方でなんか起きた。

<template>
  <input :value="store.state.foo" />
</template>

<script lang="ts">
  import { defineComponent, useContext } from '@nuxtjs/composition-api'

  export default defineComponent({
    setup(_props, context) {
      const { store } = useContext()

      return { store }
    }
  })
</script>

簡略化してるからこれで再現するかは分からないけど、これを動かすと

RangeError: Maximum call stack size exceeded

でconsoleが真っ赤になる。テストは普通に通っていたのであれれって感じ。

<template>
  <input :value="foo" />
</template>

<script lang="ts">
  import { defineComponent, computed, useContext } from '@nuxtjs/composition-api'

  export default defineComponent({
    setup(_props, context) {
      const { store } = useContext()
      const foo = computed(() => store.state.foo)

      return { foo }
    }
  })
</script>

computed使ったら動いてくれた。知性が欠落しているので理由は追ってないけどメモ。