javascript - Vue App structuring -

i trying build first webapp using vue.js

now 2 days of tutorials deep still not 100% sure how structure basic application. using vue-cli , webpack makes nice structure, including /src folder components , /router folder routing.

now plan create todo app. want dynamically switch between [show todos] , [add todo], form submit button. have achieved using without components , cli.

my structure be:

app.vue -> buttons 2 router-link components/showtodos.vue & components/addtodos.vue

components/showtodos.vue -> table including todo list

components/addtodos.vue -> form submit button

now routing part works, able switch between 2 components.

now 2 questions:

1. how can push information form in addtodos component array in showtodos component in order loop through there ?

2. is proper way structure vue app, , if not how can improve ?

   thank much.

this first time me using component based js framework, pretty hard follow along.

on structuring vuejs application , can helpful

app/    modulea/       components/       index.js       routes.js    moduleb/       components/       index.js       routes.js    index.js    routers.js    main.vue    router/    components/ -> shared    main.js  // app/routes.js import { routes modulea } './modulea' import { routes moduleb } './moduleb' export default [ ...modulea, ...moduleb ]  // app/modulea/index.js export { default routes } './routes'  // app/moduleb/index.js export { default routes } './routes'  // app/index.js export { default routes } './routes 

'