Effects not working for elements received from API?

Question

Vue.js

I created an api on nodeJS that receives data from a table in mysql, the essence of the problem is that when I display data from the props of this element, everything works, but the masonry effect and click effects are not applied. The code of the parent component in which data is received from the api:

<template>
   <Post
      v-bind:items="items"
   />
</template>
<script>
import Post from '@/components/modules/Post'
import axios from 'axios'
export default {
   components:{
      Post
   },
   data: () => {
      return{
         items: [],
      }
   },
   mounted() {
      axios.get('http://127.0.0.1:5000/api/posts', {
         headers: {'Content-Type': 'application/json',}
      }).then(response => (this.items = response['data'], this.items.hover = false))
   },
}
</script>

Answer 1

Look here and here

Answer 2

Hmm, maybe trite, but how can you help with the effects if you show the request code?
Show the code where clicks and overlay work for you.
Here, on request, it is tantamount to guessing on coffee grounds
. For example, is this what you have?
this.items.hover
Vue does not see reactivity in the object in which you added a new property, since it was not initially declared
, you need to use this.$set()
and you initially have items as an array, and then you turn it into an object,
And then it happens some kind of magic, since the component is not visible and it is not clear what is happening there and without it, no one will help you =(