With our data types separated out, we can create individual components to compartmentalize the data and methods. Create a folder component that accepts a single property, allowing the folder object variable to be passed through. As the template is so small, there is no need for a view or <script> block-based template; instead, we can pass it in as a string on the component:
Vue.component('folder', {
template: '<li><strong>{{ f.name }}</strong>
</li>',
props: {
f: Object
},
});
To make our code smaller and less repetitive, the prop is called f. This tidies up the view and lets the component name determine the display type without repeating the word folder several times.
Update the view to use the folder component, and pass in the entry variable...