I am trying to use the vue-phone-number-input component in my f7-vue app. It works fine when using in f7 app that is inlined with templates and script all in the html file. And it also works fine in a regular Vue app without f7. But when I try to use this component in an f7-vue app built by webpack with SFC and es6 modules, then an infinite render loop error occurs:
vue.runtime.esm.js?2b0e:619 [Vue warn]: You may have an infinite update loop in a component render function. found in ---> <CountrySelector> at CountrySelector.vue <VuePhoneNumberInput> at index.vue <F7PageContent> <F7Page> <PhonePage> at src/components/PhonePage.vue <F7View> <F7App> <App> at src/App.vue <Root>
The inline and module-based apps seem to be basically the same, yet the component behaves differently. I distilled a repro as simply as I could. The source code is at: https://github.com/jacobg/f7-phone-input
Demos of the repro are here:
- webpack version with error - https://jacobg.github.io/f7-phone-input
- inline version that works fine - https://jacobg.github.io/f7-phone-input/inline.html
What could be the problem? Am I missing something?