[Vue.js Vuetify typescript Vuex]vue-property-decoratorを使ってcomputed→getにしたい

Question

前提・実現したいこと

https://reffect.co.jp/vue/understaind-vue-basic#Vuex-4を参考にしながら、computedの部分をvue-property-decoratorを使っているためgetにしたいと思っています。https://qiita.com/simochee/items/e5b77af4aa36bd0f32e5#computed
しかし、以下のようなエラーが発生しています。
getの処理をどのように記述すればいいのでしょうか。

発生している問題・エラーメッセージ

'v-for' directives require that attribute value.

該当のソースコード

App.vue

<template>
  <v-app>
    <h1 class="display-2"></h1>
    <ListLine
      v-for="value in {{lists}}" //エラー箇所
      :name="value.name"
      :url="value.url"
      :key="value.name"
    ></ListLine>
  </v-app>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import ListLine from "@/components/ListLine.vue";
import axios from "axios";

@Component({
  components: {
    ListLine,
  },
})
export default class App extends Vue {
  get lists() {
    return this.$store.state.hoge;
  }

  public mounted() {
    this.$store.dispatch("getHoge");
  }
}
</script>

index.ts

import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    hoge: [],
  },
  mutations: {
    setHoge: (state, hoge) => {
      state.hoge = hoge;
    },
  },
  actions: {
    getHoge: ({ commit }) => {
      return axios.get("").then((res) => {
        console.log(res.data.results);
        commit("setHoge", res.data.results);
      });
    },
  },
  modules: {},
});

Answer 1

エラー箇所の行において、v-forに渡すソースデータの配列はマスタッシュ記法で展開する必要はありません。
次のように書き換えることで解決するかと思います。

<template>
  <v-app>
    <h1 class="display-2"></h1>
    <ListLine
      v-for="value in lists" //エラー箇所
      :name="value.name"
      :url="value.url"
      :key="value.name"
    ></ListLine>
  </v-app>
</template>