title: trying to reuse components in vue.js
body: <p>i'm fairly new in vue.js and i'm trying to do an app where you can find books but i'm stuck at the moment to reuse components.<br />
  When i open the app, the bookList component is used to show the most viewed books.<br />
  What i want to do is:<br />
  Search books from the input field and fill the bookList component with the response and then render it in the same view.
  Here is my code. Any suggestion are welcome</p>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;nav id="menu"&gt;
      &lt;input type="text" v-model="newSearch" /&gt;
    &lt;/nav&gt;
  
    &lt;main id="panel"&gt;
      &lt;header&gt;
        &lt;button class="toggle-button"&gt;☰&lt;/button&gt;
        &lt;!-- &lt;books :books="books" :url="url"&gt;&lt;/books&gt; --&gt;
        &lt;router-view&gt;&lt;/router-view&gt;
      &lt;/header&gt;
    &lt;/main&gt;
  &lt;/div&gt; &lt;!-- end app --&gt;
  
  &lt;template id="book-list-template"&gt;
    &lt;ul&gt;
      &lt;li v-for="book in books"&gt;
        &lt;div class="content"&gt;
          &lt;a v-link="{ name: 'book', params: { bookId: book.ID } }"&gt;
            &lt;img :src="book.thumbnail" class="center-block"&gt;
            &lt;p&gt;{{book.title}}&lt;/p&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/template&gt;
  &lt;template id="single-book-template"&gt;
    &lt;div class="content" v-for="book in book"&gt;
      &lt;img :src="book.cover" class="center-block prueba"&gt;
      &lt;p&gt;{{book.title}}&lt;/p&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  url = 'api_url'
  //defining some components
  var bookList = Vue.extend({
      template: '#book-list-template',
      data: function() {
          return {
              books: [],
          }
      },
      ready: function() {
          this.getBooks();
      },
      methods: {
          getBooks: function() {
              this.$http.jsonp(url+'criteria=most_viewed').then(function(response) {
                  this.$set('books', response.data);
              }, function(response) {
                  alert(response.status);
              });
          }
      }
  });
  
  
  var singleBook = Vue.extend({
      template: '#single-book-template',
      data: function() {
          return {
              book: ''
          }
      },
      ready: function() {
          this.getBookById();
      },
      methods: {
          getBookById: function() {
              this.$http.jsonp(url+'id='+this.$route.params.bookId).then(function(response) {
                  this.$set('book', response.data);
              }, function(response) {
                  alert(response.status);
              });
          }
      }
  });
  
  //creating a vue instance
  new Vue({
      el: '#app',
      data: {
        newSearch: ''
      }
  }) //end vue
  
  var App = Vue.extend({})
  
  var router = new VueRouter()
  
  router.map({
      '/': {
          component: bookList
      },
      'book/:bookId': {
          name: 'book',
          component: singleBook
      }
  })
  
  router.start(App, '#app')
  </code></pre>