created(){this.fetchUserList()}watch:{searchText(){this.fetchUserList()}}

created(){this.fetchUserList()}watch:{searchText:{handler:'fetchUserList'}}

watch:{searchText:{handler:'fetchUserList',immediate:true}}

<BaseInputv-mode='searchText'@keydown.enter='search'/><BaseButton@click='search'><BaseIconname='search'/></BaseButton>

importBaseButtonfrom'./base-button'importBaseIconfrom'./base-icon'importBaseInputfrom'./base-input'exportdefault{components:{BaseButton,BaseIcon,BaseInput}}

importVuefrom'vue'importupperFirstfrom'lodash/upperFirst'importcamelCasefrom'lodash/camelCase'// Require in a base component contextconstrequireComponent=require.context(‘./components’,false,/base-[\w-]+\.vue$/)requireComponent.keys().forEach(fileName=>{// Get component configconstcomponentConfig=requireComponent(fileName)// Get PascalCase name of componentconstcomponentName=upperFirst(camelCase(fileName.replace(/^\.\//,'').replace(/\.\w+$/,'')))// Register component globallyVue.component(componentName,componentConfig.default||componentConfig)})

componentConfig.default||componentConfig

importauthfrom'./modules/auth'importpostsfrom'./modules/posts'importcommentsfrom'./modules/comments'// ...exportdefaultnewVuex.Store({modules:{auth,posts,comments,// ...}})

importcamelCasefrom'lodash/camelCase'constrequireModule=require.context('.',false,/\.js$/)constmodules={}requireModule.keys().forEach(fileName=>{// Don't register this file as a Vuex moduleif(fileName==='./index.js')returnconstmoduleName=camelCase(fileName.replace(/(\.\/|\.js)/g,''))// namespaceつけとくと便利だぜ！modules[moduleName]={namespaced:true,...requireModule(fileName),}// namespaceいらなければこんな感じ// modules[moduleName] = requireModule(fileName)})exportdefaultmodules

importauthfrom'./modules'exportdefaultnewVuex.Store({modules})

data(){return{loading:false,error:null,post:null}},watch:{'$route':{handler:'resetData',immediate:true}},methods:{resetData(){this.loading=falsethis.error=nullthis.post=nullthis.getPost(this.$route.params.id)},getPost(postId){// ...}}

data(){return{loading:false,error:null,post:null}},created(){this.getPost(this.$route.params.id)},methods:{getPost(postId){// ...}}

<router-view:key="$route.fullPath"><router-view>

<template><input:value="value"@input="$emit('input', $event.target.value)"></template>

<BaseInput@focus.native="doSomething">

<template><label>    {{ label }}<input:value="value"@input="$emit('input', $event.target.value)"></label></template>

<template><label>    {{ label }}<input:value="value"v-on="listeners"></label></template><script>computed:{listeners(){return{...this.$listeners,input:event=>this.$emit('input',event.target.value)}}}</script>

<BaseInput@focus="doSomething">

<BaseInputplaceholder="What's your name?"@focus="doSomething"/>

<template><label>    {{ label }}<input:value="value"v-on="listeners"></label></template>

<template><label>    {{ label }}<inputv-bind=$attrs":value="value"v-on="listeners"></label></template>

(Emitted value instead of an instance of Error)  Error compiling template:  <div></div>  <div></div>  - Component template should contain exactly one root element.     If you are using v-if on multiple elements, use v-else-if     to chain them instead.

<template><liv-for="route in routes":key="route.name"><router-link:to="route">      {{ route.title }}</router-link></li></template>

<template><ul><NavBarRoutes:routes="persistentNavRoutes"/><NavBarRoutesv-if="loggedIn":routes="loggedInNavRoutes"/><NavBarRoutesv-else:routes="loggedOutNavRoutes"/></ul></template>

functional: true,render(h, { props }) {  return props.routes.map(route =><likey={route.name}><router-linkto={route}>        {route.title}</router-link></li>  )}

// Initconstmap=newmapboxgl.Map(/* ... */)map.on('load',()=>{// Datamap.addSource(/* ... */)// Layersmap.addLayer(/* ... */)map.addLayer(/* ... */)// Hover effectsmap.on('mousemove',/* ... */)map.on('mouseleave',/* ... */)})

<MapboxMap><MapboxMarkers:items="cities"primary><templateslot-scope="city"><h3>{{ city.name }}</h3></template></MapboxMarkers><MapboxNavigation/></MapboxMap>

created(){const{map}=this.$parentmap.on('load',()=>{map.addSource(/* ... */)map.addLayer(/* ... */)})},beforeDestroy(){const{map}=this.$parentmap.on('load',()=>{map.removeSource(/* ... */)map.removeLayer(/* ... */)})},render(h){returnnull}