How to create a reusable component in VueJs?

I would like to create Side Panel as a reusable component in Framework7 with VueJS. Here is my code..

Card.vue

<f7-card>
  <f7-card-header>Card header content</f7-card-header>
  <f7-card-content><img src="https://wiki.videolan.org/images/Ubuntu-logo.png"></img></f7-card-content>
  <f7-card-footer>Card footer content</f7-card-footer>
</f7-card>

Now i registered as a component like below,

import Vue from 'vue'
export default [
    {
        path: '/card/',
        component: require('./Card')
    },
]

In later vues i imported as,

import Card from './Card.vue'

and i try to access in another vues like,

Now i'm getting an error like

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Can anyone help me where have i mistaken?

Thanks,

It's not really clear from your code exactly what you are doing, but the error you are getting happens when you try to use a component as a child of another component without registering it in the parent's components setting like this:

<script>
import Card from './Card.vue'

export default {
  data () {
    return {
       somedata: 'some value'
    }
  },
  components: {Card: Card}, // <- you're missing this
  // etc...

}
</script>

You can also register components globally. More here: https://v2.vuejs.org/v2/guide/components.html#Local-Registration