title: Vue.js: Data is not updating with state change so the re-render does not happen
body: <p>I have a reusable component that is a video.js video player.  This component works fine when the data is passed in on the initial DOM load.</p>
  
  <p>I need to figure out why my component is not re-rendering after the state is updated in Vuex.</p>
  
  <p>The parent component passes down the data for the video via props. I also have this set to be used with multiple videos and it works fine with a single one or many.</p>
  
  <pre><code>&lt;div v-for="video in videos" :key="video.id"&gt;
    &lt;video-player :videoName="video.videoName" :videoURL="video.videoURL" :thumbnail="video.thumbnail"&gt;&lt;/video-player&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm setting the initial state to a generic video for all users in my Vuex store.</p>
  
  <pre><code>getFreeVideo: [
    {
      videoName: "the_video_name",
      videoURL:  "https://demo-video-url.mp4",
      thumbnail: "https://s3.amazonaws.com/../demo-video-poster.jpg"
    }
  ]
  </code></pre>
  
  <p>This is set in data in <code>videos</code> <em>(and later set to getFreeVideo)</em></p>
  
  <pre><code> data () {
     return {
       videos: []
     }
   }
  </code></pre>
  
  <p>I'm setting <code>videos</code> in data() to getFreeVideo in the store within the created() lifecycle:</p>
  
  <pre><code>    this.videos = this.getFreeVideo
  </code></pre>
  
  <p>..and checking if a user has a personal video and updating the state in the created() lifecycle.</p>
  
  <pre><code> this.$store.dispatch('getFreeVideo', 'the_video_name')
  </code></pre>
  
  <p>This makes a request with axios and returns our video data successfully.</p>
  
  <p>I'm using mapState <code>import { mapState } from 'vuex</code> to watch for a state change.</p>
  
  <pre><code> computed: {
    ...mapState(['getFreeVideo'])
  }
  </code></pre>
  
  <p>I am not seeing why <code>this.videos</code> is not being updated.
  Here, my assumption regarding the expected behaviour would be <code>videos[]</code> being updated from the state change and a re-rendering of the component.</p>
  
  <p>As you can see below, the state has been updated, and the <code>videoUpdate()</code> within the computed properties has the new data as well:</p>
  
  <p><a href="https://i.stack.imgur.com/Ne4hm.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Ne4hm.png" alt="vuex"></a>
  <a href="https://i.stack.imgur.com/Hy8Ui.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Hy8Ui.png" alt="Vuex"></a>
  ..but, <code>videos[]</code> is never updated thus the video component never gets the props new props etc..</p>
  
  <p>A couple of notes:</p>
  
  <ul>
  <li>already tried, hiding the child component with <code>v-if</code> <em>(and showing after state change)</em></li>
  <li>tried <code>setTimeout</code> to test things, but the data will come through and then the videoJS player never instantiates correctly <em>(must have initial data)</em></li>
  <li>tried doing this with a local method / not using Vuex state</li>
  <li>console is showing error <code>TypeError: Cannot read property '_withTask' of undefined</code> but this happens even when the demo video loads correctly, so this seem unrelated, and I can't find anything anywhere in here that presents itself as undefined.</li>
  </ul>
  
  <p><strong>TL;DR</strong></p>
  
  <p>I basically can't get child component to re-render after the state change.
  And although I can get the data into <code>videos[]</code> with a different structure, it still never re-renders.  </p>
  
  <p><strong>Why is the data not making it through, and the re-render never happening?</strong></p>
  
  <p><em>Please don't post answers that only contain links to 'understanding reactivity' or something without any explanation.</em>   </p>
  
  <p><em>appended for @acdcjunior</em></p>
  
  <pre><code>//action   
  getFreeVideo: (context, videoName) =&gt; {
      axios({
        method: 'post',
        url: 'https://hidden-for-posting',
        data: {
          action: 'getVideo',
          userId: '1777', // (hardcoded to test)
          videoName: videoName
        },
        headers: {
          'x-api-key': apiKey,
          'Content-Type': 'application/json'
        }
      })
      .then(response =&gt; {
        let video = [
          {
            videoName: response.data.videoName,
            videoURL: response.data.videoURLs.mp4,
            thumbnail: response.data.thumbnails['1280']
          }
        ]
        return context.commit('updateGetFreeVideo', video)
      })
      .catch(error =&gt; {
        if (error.response) {
          console.log(error.response)
        } else if (error.request) {
          console.log(error.request)
        } else {
          console.log('Error', error.message)
        }
        console.log(error.config)
      })
  }
  
  // mutation:
  updateGetFreeVideo: (state, payload) =&gt; {
    return state.getFreeVideo = payload
  }
  
  // getter:
  getFreeVideo: state =&gt; {
    return state.getFreeVideo
  }
  </code></pre>