Lets see now how we can use multiple instances of our story Component to display a list of stories. We have to update the template to not display always the same story, but the plot of any story we want:
<template id="story-template">
<h1>{{ plot }}</h1>
</template>
We also have to update our Component to use this property. To do so we will add the new property, 'plot', to the props attribute of the Component:
Vue.component('story', {
props: ['plot'],
template: "#story-template"
});
Now we can pass plot and a plain string to it, every time we use the <story> element:
<body>
<div class="container">
<story plot="My horse is amazing."></story>
<story plot="Narwhals invented Shish Kebab."></story>
<story plot="The dark side of the Force is stronger."></story>
</div>
</body>
Display...