根據(jù)業(yè)務(wù)需求，需要做個(gè)視頻播放器頁面，大概如下圖：

業(yè)務(wù)需求是這樣，上面是個(gè)視頻播放器，下面是個(gè)視頻列表，當(dāng)我點(diǎn)視頻列表的時(shí)候，播放器切換數(shù)據(jù)源
我使用的是vue的一個(gè)視頻播放器插件vue-dplayer,代碼如下

<template>
  <div id="app" class="container">
    <d-player :options="options"></d-player>
    <input type="text" v-model="options.video.url">
  </div>
</template>

<script>
import VueDPlayer from 'vue-dplayer'
export default {
  name: 'App',
  components: {
    'd-player': VueDPlayer
  },
  methods:{
    play:function(){
      console.log('call back');
    },
  },
  data:function(){
    return {
      options: {
        video: {
          url: 'http://static.smartisanos.cn/common/video/t1-ui.mp4',
          pic: 'http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg'
        },
        lang:'zh-cn',
        autoplay: false,
      },
    }
  }
}
</script>

<style>

</style>

問題1：請(qǐng)問我如何修改data里面的options.video.url的參數(shù)，似乎只能在created里面修改，頁面渲染完成之后，在mounted里面修改url參數(shù)是無效的？為什么無法修改data里面的數(shù)據(jù)呢？
問題2：組件如何拆分呢？我目前的結(jié)構(gòu)是根組件里面有一個(gè)視頻組件，一個(gè)列表組件，這樣是否合理？