Vueでv-forを使った並び替えが上手くいきません。

Question

現在、Laravel, Vue.jsを用いたアプリを開発しています。

初めてVueを使用しており、こちらのサイトを参考に、v-forを使って並び替えを行う実装をしているのですが、１歩目から複数のエラーが発生しており、詰まっています。
わかる方がいらっしゃいましたら、ご教授いただきたいです。

該当のコード

template

<template>
  <div id="my-list">
      <ul>
        <li v-for="item in items" v-bind:key="item.id">
          <a :href="action + item.id.toFixed()"><button>
            <figure>
                <img v-if="item.file_path == ''" v-bind:src="images/no-image.jpg" alt="no image">
                <img v-else :src="'storage/image/' + item.file_path">
            </figure>
            <figcaption>
              <p class="shoe-name">{{ item.title }}</p>
              <p class="last-maintenance">{{ item.created_at | moment }}</p>
            </figcaption>
          </button></a>
        </li>
      </ul>
  </div>
</template>
<script>
import moment from 'moment';
export default {
  data() {
    return {
      action: "/posts/show/",
      reverseItems: this.items,
      sortOrder: 1,
    }
  },
  props:  {
    items: Array,
  },
  computed: {
  // 配列の要素順番を逆順にする
    reverseItems() {
      return this.items.splice().reverse(); 
    }
  },
  filters: {
    moment: function (date) {
      return moment(date).format('YYYY/MM/DD');
    },
  }
}
</script>

blade

@extends('layouts.app')

@section('content')
    <list-rendering-component v-bind:items="{{ $items }}"></list-rendering-component>
@endsection

bladeに渡す$itemsの中身を渡すコントローラー

    public function index()
    {
        $userId = Auth::id();
        $items = Post::where('user_id',$userId)->get();
        return view("posts.index",compact('items'));
    }

発生しているエラー

[Vue warn]: The computed property "reverseItems" is already defined in data.

found in

---> <ListRenderingComponent> at resources/js/components/ListRenderingComponent.vue
       <Root>
warn	@	app.js:60124
initComputed	@	app.js:64288
initState	@	app.js:64144
.
.
.

[Vue warn]: Property or method "item" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <ListRenderingComponent> at resources/js/components/ListRenderingComponent.vue
       <Root>
.
.
.

Error in render: "TypeError: Cannot read property 'id' of undefined"

found in

---> <ListRenderingComponent> at resources/js/components/ListRenderingComponent.vue
       <Root>
.
.
.
TypeError: Cannot read property 'id' of undefined
.
.
.
Uncaught (in promise) TypeError: Cannot set property '__VUE_DEVTOOLS_UID__' of null
    at registerAppJob (backend.js:1437)
.
.
.

App with id 0 not found
.
.
.
Uncaught (in promise) TypeError: Cannot set property 'lastInspectedComponentId' of null
at ~
at ~
at ~
.
.
.
Uncaught (in promise) TypeError: Cannot read property 'id' of null
at ~
at ~
at ~

試したこと

エラー文から、itemやidが定義されていないっぽいことはわかるのですが、対策法の検討が付きません。
テンプレート内で、itemとidを使っているのは、v-bind:keyですが、v-forでitem in itemsとして取り出されて定義されているのではないのでしょうか？

まだvueへの理解が浅いので、お力添えをいただきたいです。

Answer 1

算出プロパティの定義関数名にも定義変数名にも同じreverseItemsを使っています。Vueのルールではそれは推奨されませんので、算出プロパティで名前を残すなら、変数名は別名に変えてください。

already ●●●● defined は、すでに定義済ですという警告です。

そして、それが原因で、オブジェクト名と算出プロパティ名が混同されてしまい、オブジェクト内のメンバを呼び出せなくなっています。

Comments

[trigger]

ありがとうございます。
ご回答を参考にその後触ってみたところ、item in itemsをitem in reverseItemsとすることで解決しました。ここのitemsはpropsで引き継いだオブジェクトかと勘違いしていました。

Cannot set property '__VUE_DEVTOOLS_UID__' of nullのエラーはいつの間にか解決してしまっていたのですが、https://github.com/vuejs/vue-devtools/issues/1289　が参考になりました。

ありがとうございました。