f7-list with template not working properly

[anuragnagarkota]

Hii

If I write the following code

<template>
   <f7-list>
<f7-list-item>
    <f7-label>Password</f7-label>
    <f7-input type="text" placeholder="Enter Password" ></f7-input>
         </f7-list-item>
   </f7-list>
</template>

then it works fine.

But if I put the f7-list-item part in a separate file (template) and call like the following

<template>
   <f7-list>
     <Password></Password>
   </f7-list>
</template>
<script>
import Password from "./Password.vue";
export default {
  components: {
   Password
  }
}
</script>

//Password.vue

<template>
<f7-list-item>
    <f7-label>Password</f7-label>
    <f7-input type="text" placeholder="Enter Password" ></f7-input>
         </f7-list-item>
</template>

then it shows a dot in front of list item. I think the f7-list part is rendered without waiting for the f7-list-item( Password). Please look into it whether it could be resolved

Thanks in advance!

[nolimits4web]

Duplicate #401