my component is not displaying-vuejs-laravel - laravel

Question

tried to show component in my blade but it still not working.i used laravel 7
there is my vue
<template>
<h3>Option Values</h3>
</template>
<script>
export default {
name: "attribute-values",
props: ['attributeid'],
}
</script>
there is how i call it in my view
<div class="tab-pane" id="values">
<attribute-values :attributeid="{{ $attribute->id }}"></attribute-values>
</div>
i import it in js file
Vue.component('attribute-values', require('./components/AttributeValues.vue').default);
there is my package.json file
"devDependencies": {
"axios": "^0.19",
"bootstrap": "^4.0.0",
"cross-env": "^7.0",
"jquery": "^3.2",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.19",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.20.1",
"sass-loader": "^8.0.0",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"vue-swal": "^0.1.0",
"vue-js-modal": "^1.3.26"
}
what should i do .thank you in advance.
i run npm run dev and npm run watch many times. my file js is generated in public folder so there is no problem. but component still not showed up.

Answer 1

i solved it. all what i did is i separate div id=app from my content.because tags don't match with vue.and i add vue.use(component) like below in my js file:
import AttributeValues from './components/AttributeValues.vue'
Vue.use(AttributeValues);
Vue.component('attribute-values', require('./components/AttributeValues.vue').default, {
name: 'attribute-values'
});
hope that it solve someone's problem.