如何将数据从vue实例传递到组件

Question

我的Vue没有呈现branches数据属性。如何将数据从根Vue传递到Hello.vue组件？我尝试过v-bind和passdata，但似乎没有任何工作。任何帮助都非常感谢。

main.js

import Vue from 'vue'
import App from './App'
import router from './router'

 Vue.use(require('vue-resource'))
 var esquery = require('./query') 
 Vue.config.productionTip = false

/* eslint-disable no-new */
var app= new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
  data: {
     branches: ''
    },
  methods: {

    search1: function () {
      var self=this
      alert('hi')
      esquery.search().then(function(val){

        self.branches=val.hits.hits[0]._source
        alert(JSON.stringify(self.branches))
      })

     }

    }
  })
app.search1()
//alert (JSON.stringify(branches))

App.vue

<template>
  <div id="app">
    <router-view> </router-view> 
  </div>
</template>

<script>
export default {
  name: 'app',
    props: ['branches']
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Hello.vue
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Design your application smartly</h2>
    <table>
    <tr> Branches </tr>
    <td v-for="branch in branches" :branches="branches"> {{ branch.branchname }}</td>
    </table> 
  </div>
</template>

<script>
export default {
  name: 'hello',
  props: ['branches'],
  data () {
    return {
      msg: 'Welcome to Html'
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>