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：组件如何拆分呢？我目前的结构是根组件里面有一个视频组件，一个列表组件，这样是否合理？