我想添加一个功能到我的博客，我可以点击一个图像，它会自动跳转到下一个图像和文本。
我已经做了一个简单的版本，没有博客的结构，这工作.像这样：https://i.gyazo.com/81c5baa0348518fd3327c303dac07dfc.mp4
但是当我尝试修改它到我的博客的（Vue）结构，它不会再工作了，我做错了什么？我甚至尝试了一些代码，我发现在堆栈。
注解掉的代码是我自己的原始代码。
后续问题，如何循环文本？同样的方式？乍一看，我想不出如何循环。
HTML语言

<div id="app">
  <h1>Test pics</h1>
  <div> 
    <!--<img v-bind:src="images[hovered]" v-on:click="changePicture()" width="100px">-->
    <img v-if="image" :key="image" @click="changePicture" class="image" :src="image" alt="image">
  </div>
</div>

维/日

new Vue({
  el: "#app",
  data() {
    return {
    image:null,
    posts: [
      {
        id:1,
        hovered: 0,
        images: ['https://via.placeholder.com/150/0000FF/FFFFFF?text=1','https://via.placeholder.com/150/0000FF/FFFFFF?text=2','https://via.placeholder.com/150/0000FF/FFFFFF?text=3'],
        text: ['text=1','text=2','text=3']
      },
      {
        id:2,
        hovered: 0,
        images: ['https://dummyimage.com/600x400/f00/fff','https://dummyimage.com/600x400/00f/fff','https://dummyimage.com/600x400/fbh/fff'],
        text: ['dummy=1','dummy=2','dummy=3']
      }]
  };
  },
  mounted(){
    this.changePicture();
  },
  methods: {
    changePicture() {
      this.post.hovered = this.post.images[this.post.hovered];
      this.post.hovered = (this.post.hovered + 1) % this.post.images.length;

      /*this.post.hovered = (++this.post.hovered)%(this.post.images.length);
      console.log(this.post.hovered+1);*/
    }
  }
})

编辑：
有效的代码：https://codepen.io/TCGPlaza/collab/QWxJXbp/01272374f7f79eb5efdd4bfcb2bb93f3
我希望工作代码基本上是复制多个单独的职位。假设我做了一个新的职位，我添加了6张图片，然后我所要做的就是点击图片6次，使其回到第一张图片。其他职位可能只有2张图片等...