title: nuxt.js passing prop to component's inner element
body: <p>I have a simple component:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div id="search__index_search-form"&gt;
          &lt;input :foo-id="fooId" @keyup.enter="findFoos()" type="text" :value="keyword" @input="updateKeyword"
                 placeholder="Search for a foo"&gt;
          &lt;button @click="findFoos()"&gt;Search!&lt;/button&gt;
          {{fooId}}
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      import {mapState} from "vuex";
  
      export default {
          computed: mapState({
              keyword: state =&gt; state.search.keyword
          }),
          data: function () {
              return {fooId: "all"};
          },
          methods: {
              updateKeyword(e) {
                  this.$store.commit("setSearchKeyword", e.target.value);
              },
              findFoos() {
                  this.$store.dispatch("findFoos");
              }
          }
      };
  &lt;/script&gt;
  </code></pre>
  
  <p>I am calling it from nuxt page:</p>
  
  <pre><code>&lt;template&gt;
      &lt;searchbar v-bind:fooId="500"/&gt;
  &lt;/template&gt;
  &lt;script&gt;
      import searchBar from "~/components/search-bar.vue";
  
      export default {
          components: {
              'searchbar': searchBar
          }
      };
  &lt;/script&gt;
  </code></pre>
  
  <p>This results in:</p>
  
  <pre><code>&lt;div id="search__index_search-form" fooid="500"&gt;&lt;input shop-id="all" type="text" placeholder="Search for a foo"&gt;&lt;button&gt;Search!&lt;/button&gt;
        all
  &lt;/div&gt;
  </code></pre>
  
  <p>Question is, why is fooId bound to "div.search__index_search-form" and not to input? And how come {{fooId}} results in "all" (default state), and not "500"?</p>