title: Vue.js update not triggered when property changed inside a WebRTC callback
body: <p>I'm trying to create a small Vue.js component that takes permissions for the camera and microphone from the user and displays that stream on a canvas. Simple enough, right?</p>
  
  <p>But in reality, I couldn't get Vue.js to update the src property of my <code>video</code> tag so I added a simple <code>status</code> message to test if the changes are being picked up by Vue. They aren't. How do I ensure that the Vue picks up the property changes inside the <code>getUserMedia</code> callback?</p>
  
  <p>Please see the fiddle here: <a href="https://jsfiddle.net/49r0c4cf/" rel="nofollow noreferrer">https://jsfiddle.net/49r0c4cf/</a></p>
  
  <p>And here's the code:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;button @click="getPermissions()" &gt;Get permissions&lt;/button&gt;
      &lt;video v-bind:src="videoStreamSrc" autoplay&gt;&lt;/video&gt;
      &lt;h1&gt;{{status}}&lt;/h1&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    data() {
      return {
        videoStreamSrc: null,
        status: 'default',
      };
    },
    methods: {
      getPermissions() {
        this.status = 'FETHCING';
        const vm = this;
        navigator.mediaDevices.getUserMedia({
          video: true,
          audio: true,
        }, () =&gt; {
          // vm.videoStreamSrc = window.URL.createObjectURL(localMediaStream);
          vm.$set('status', 'DONE');
        }, (err) =&gt; {
          // eslint-disable-next-line
          console.error(err);
        });
      },
    },
  };
  &lt;/script&gt;
  </code></pre>