fix(runtime-core): catch TypeError when setting invalid props

[pikax]

Fix the case when the html element has type validation for a specific prop.

<template>
  <button @click="toggle">Press me {{srcObject}}</button>
  <video :srcObject="srcObject" />
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    const srcObject = ref(0);
    const toggle = () => srcObject.value++;
    return { srcObject, toggle };
  }
};
</script>

[jonaskuske]

I don't think that wrapping this in a try/catch is enough to solve this. :/
As we're still casting to "" instead of actually setting the property to null when it is required, in the following example stopping the video won't work since the browser will just ignore our attempt to set srcObject to "" and keep playing back the video with the previous srcObject:

<template>
  <button @click="start">Start</button>
  <button @click="stop">Stop</button>
  <video :srcObject.prop="stream" autoplay />
</template>

<script>
export default {
  data: () => ({ stream: null }),
  methods: {
    async start() {
      this.stream = await navigator.mediaDevices.getUserMedia({ video: true })
    },
    stop() {
      this.stream = null
  },
  }
}
</script>

See this comment: #1049 (comment)

[pikax]

@jonaskuske you right, this is actually a bug I spotted when trying to reproduce this issue.

I wasn't thinking straight last night, I will update the PR to reflect the bug I found, thank you.

[ycmjason]

#1092
Here is my attempt to fix.

[yyx990803]

See 20bc7ba and 98bee59