Error in callback for watcher "$route"

[michaelpumo]

If 2 layouts have the same ID of 'app' in the HTML / template, the following error is thrown and routes do not change.

vue.runtime.esm.js?2b0e:587 [Vue warn]: Error in callback for watcher "$route": "TypeError: f.compile is not a function"

(found in <Root>)
warn @ vue.runtime.esm.js?2b0e:587
logError @ vue.runtime.esm.js?2b0e:1733
globalHandleError @ vue.runtime.esm.js?2b0e:1728
handleError @ vue.runtime.esm.js?2b0e:1717
run @ vue.runtime.esm.js?2b0e:3231
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:2977
(anonymous) @ vue.runtime.esm.js?2b0e:1833
flushCallbacks @ vue.runtime.esm.js?2b0e:1754
Promise.then (async)
microTimerFunc @ vue.runtime.esm.js?2b0e:1802
nextTick @ vue.runtime.esm.js?2b0e:1846
queueWatcher @ vue.runtime.esm.js?2b0e:3064
update @ vue.runtime.esm.js?2b0e:3205
notify @ vue.runtime.esm.js?2b0e:693
reactiveSetter @ vue.runtime.esm.js?2b0e:1010
(anonymous) @ vue-router.esm.js?8c4f:2508
(anonymous) @ vue-router.esm.js?8c4f:2507
updateRoute @ vue-router.esm.js?8c4f:1997
(anonymous) @ vue-router.esm.js?8c4f:1875
(anonymous) @ vue-router.esm.js?8c4f:1984
step @ vue-router.esm.js?8c4f:1714
step @ vue-router.esm.js?8c4f:1721
runQueue @ vue-router.esm.js?8c4f:1725
(anonymous) @ vue-router.esm.js?8c4f:1979
step @ vue-router.esm.js?8c4f:1714
(anonymous) @ vue-router.esm.js?8c4f:1718
(anonymous) @ vue-router.esm.js?8c4f:1964
(anonymous) @ vue-router.esm.js?8c4f:1757
(anonymous) @ vue-router.esm.js?8c4f:1833
Promise.then (async)
(anonymous) @ vue-router.esm.js?8c4f:1780
(anonymous) @ vue-router.esm.js?8c4f:1801
(anonymous) @ vue-router.esm.js?8c4f:1801
flatMapComponents @ vue-router.esm.js?8c4f:1800
(anonymous) @ vue-router.esm.js?8c4f:1736
iterator @ vue-router.esm.js?8c4f:1943
step @ vue-router.esm.js?8c4f:1717
step @ vue-router.esm.js?8c4f:1721
step @ vue-router.esm.js?8c4f:1721
runQueue @ vue-router.esm.js?8c4f:1725
confirmTransition @ vue-router.esm.js?8c4f:1972
transitionTo @ vue-router.esm.js?8c4f:1874
push @ vue-router.esm.js?8c4f:2181
push @ vue-router.esm.js?8c4f:2534
handler @ vue-router.esm.js?8c4f:444
invoker @ vue.runtime.esm.js?2b0e:2023
fn._withTask.fn._withTask @ vue.runtime.esm.js?2b0e:1822
vue.runtime.esm.js?2b0e:1737 TypeError: f.compile is not a function
    at j (vue-extend-layout.js?f3b8:1)
    at Vue.a (vue-extend-layout.js?f3b8:1)
    at Watcher.run (vue.runtime.esm.js?2b0e:3229)
    at flushSchedulerQueue (vue.runtime.esm.js?2b0e:2977)
    at Array.eval (vue.runtime.esm.js?2b0e:1833)
    at flushCallbacks (vue.runtime.esm.js?2b0e:1754)

Just thought I'd make you aware of this as a potential copy / paste problem that people may come across.

new Vue({
  router,
  store,
  render: h => h(App),
  ...layout
}).$mount('#app')

[ktquez]

Thanks @michaelpumo

[michaelpumo]

Great plugin by the way! Thanks for taking the time to build it @ktquez

[ktquez]

@michaelpumo
Thanks for using.