title: data() not showing vuejs components
body: <p>when i list data on page while  console vue data() showing properly. like this check on console.
  <a href="https://i.stack.imgur.com/sdBwn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sdBwn.png" alt="enter image description here" /></a></p>
  <p>but i filter data with same page data() is not showing like this check console</p>
  <p><a href="https://i.stack.imgur.com/Qf1Rr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qf1Rr.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/EFbZq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EFbZq.png" alt="enter image description here" /></a></p>
  <p>this is my code</p>
  <hr />
  <pre><code>&lt;script&gt;
  import AppLayout from '../../Layouts/AppLayout'
  import Pagination from '../../Pages/Common/Pagination'
  export default {
      props: [
          'videos',
          'request',
      ],
  
      components: {
          AppLayout,
          Pagination
      },
  
      data() {
          return {
              key:'',
              src: null ? '' : this.$page.props.baseUrl +'/storage/videos/' + this.videos.data[0]['filename'] ,
              title: null ? '' : this.videos.data[0]['title'],
              videoImage: this.$page.props.baseUrl + '/assets/images/img/video.jpg',
              nextTitle : null ? '' : this.videos.data[1]['title'],
          }
      },
      
      methods:{
          changeVideo(filename, title, index) {
              this.$data.src = this.$page.props.baseUrl +'/storage/videos/' + filename;
              this.$data.title = title;
              this.$data.key = index;
  
              if(this.videos.data.length-1 &lt;= index) {
                  index = 0;
                  this.$data.nextTitle = this.videos.data[index]['title'];
              } else {
                  this.$data.nextTitle = this.videos.data[index+1]['title'];
              }
              
              //Force video load.
              var vid = this.$refs.video;
              vid.load();
          },
  
          filterdata() {
              this.$inertia.get(this.route('trainingModule.index'), this.request)
          },
  
          nextVideo(n) {
              if(this.videos.data.length-1 &lt;= n) {
                  n = 0;
                  this.$data.key = n;
              } 
  
              this.$data.src = this.$page.props.baseUrl +'/storage/videos/' + this.videos.data[n]['filename'];
              this.$data.title = this.videos.data[n]['title'];
              this.$data.nextTitle = this.videos.data[n+1]['title'];
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  <p>please help me why this issue showing me. and why data not showing after filter</p>