vue视频播放器切换数据

Question

根据业务需求，需要做个视频播放器页面，大概如下图：业务需求是这样，上面是个视频播放器，下面是个视频列表，当我点视频列表的时候，播放器切换数据源我使用的是vue的一个视频播放器插件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：请问我如何修改data里面的options.video.url的参数，似乎只能在created里面修改，页面渲染完成之后，在mounted里面修改url参数是无效的？为什么无法修改data里面的数据呢？问题2：组件如何拆分呢？我目前的结构是根组件里面有一个视频组件，一个列表组件，这样是否合理？