将组件course中的数据（即courses），移到vue实例中。在组件course中添加props选项，接收对象数组courses。调整vue实例中的代码，将vue实例中的对象数组传给course组件

首先，在组件course中添加props选项，接收对象数组courses：

Vue.component('course', {
  props: {
    courses: {
      type: Array,
      required: true
    }
  },
  template: `
    <div>
      <h2>Courses:</h2>
      <ul>
        <li v-for="course in courses">{{ course.name }}</li>
      </ul>
    </div>
  `
})

然后，在vue实例中，将数据courses移到实例中。并把实例中的对象数组传给course组件。

var app = new Vue({
  el: '#app',
  data: {
    courses: [
      { name: 'Vue.js 2.x', duration: '3 days' },
      { name: 'React', duration: '2 days' },
      { name: 'Angular', duration: '4 days' }
    ]
  },
  template: `
    <div>
      <h1>Course List</h1>
      <course :courses="courses"></course>
    </div>
  `
})

这样就可以在vue实例中管理数据，然后将数据传递给组件。当数据改变时，组件也会自动更新。