[Vuejs]-Inject data into scope without <template>

The benefit of having component is that it can be re-used at multiple places. so idea is to define template at one place and you can use it at multiple places.

the example you have written, you will be able to re-use it at again. template of component is generally not defined inside component, it will be separate and than that component can be used at multiple places.

See one sample below:

<div id="app">
  <template id="item-edit">
    <li>
      <span v-show="!inEdit">{{item.name}}</span>
      <input v-show="inEdit" type="text" v-model="item.name" />
      <a href="#" @click.prevent="toggle();">{{inEdit ? 'save' : 'edit'}}</a>
    </li>
  </template>
  <ul>
    <item-edit v-for="item in items" :item="item"></item-edit>
  </ul>
</div>

Complete fiddle: http://jsfiddle.net/corh2tqo/