Mobile browser time inputs don't work inside vue element - ios

Question

I have a laravel webapp that uses multiple forms. I have recently introduced Vue.js v2 to deal with some specific custom input types which are working well.
Problem is that ordinary html5 input[type=time] inputs that are inside the vue instance element are not rendered properly in iOS safari/chrome - they appear as native timepickers but appear to have a blank value. When you click to change they do display the correct value.
I can workaround by using a custom vue component that just passes the value property into the vue instance but I figure I must be doing something wrong because I can't find a single mention of this anywhere.
I have managed to reproduce this on JSFiddle problem only appears in mobile browsers
html
<div id="app" style="background-color:lightblue; padding:30px">
<h3>This div is the Vue element</h3>
<form action="">
<p>
<label for="">Standard Input</label>
<input type="time" value="23:24:00" />
</p>
<p>
<label for="">Vue Component</label>
<vue-time value="13:45:00"></vue-time>
</p>
</form>
</div>
<div style="background-color:lightyellow; padding:30px">
<h3>This div is outside the Vue instance</h3>
<form action="">
<label for="">Standard Input</label>
<input type="time" value="23:24:00" />
</form>
</div>
js
Vue.component('vue-time', {
template: '<input type="time" :value="value">',
data() {
return {
value: ''
}
}
});
const vue = new Vue({
el: '#app',
data() {
return {
value: ''
}
}
});

Answer 1

I had a somewhat similar problem and I found this thread that helped me, see if it helps you:
https://forum.vuejs.org/t/solved-fixed-position-element-disappears-during-transition-on-mobile-browsers/8960
I would comment on your question instead of proposing this as an answer but I don't have the reputation to do so yet.