Vue+el-select v-model绑定为对象时回显失效的问题探究

源代码如下：

<template>
    <el-select v-model="media" value-key="mediaId" placeholder="请选择" @change="mediaChange">
        <el-option v-for="item in medias" :key="item.mediaId" :label="item.mediaName" :value="item">
        </el-option>
    </el-select>
</template>

<script>
export default {
    data() {
        return {
            media: {}
        }
    },
    props: {
        mediaId: Number
    },
    computed: {
        medias() {
            return this.$store.getters.medias
        },
    },
    watch: {
        mediaId(val) {
            if (val != null) {
                // 下面这一行注释的代码是失效的
                // this.media.mediaId = val
                // 下面这一行注释的代码是正确的
                this.media = { mediaId: val }
                console.log('后', this)
            }
        },
    },
    methods: {
        mediaChange(value) {
            this.$emit('selectMedia', value)
        }
    },
    mounted() {
        this.$store.dispatch('creativity/updateMedias')
    },
}
</script>

<style>

</style>

this.media.mediaId = val 为什么会失效？
mediaId是父组件传进来的属性值，这边我使用watch来监听mediaId的变化，然后修改data的media.mediaId。由于修改只是media这个对象属性，
而不是这个对象的引用，所以不会触发view更新。
this.media = { mediaId: val } 为什么可以？
因为修改是这个绑定对象的引用，所以可以能触发view更新