I'm facing an issue with my frontend due to having two separate scripts in my Vue.js component class. How can I merge them into one cohesive script? If the problem stems from elsewhere, what could it be?
<script>
import GETUSER from "@/graphql/getUser.gql"
export default {
props: ["user"],
data(){
return{
id: this.$route.params.id,
panels:{
'X': false,
'Y': false
}
}},
computed:{
}
}
</script>
Here is the second script:
<script>
import PieChart from "@/PieChart.js";
export default {
name: "App",
components: {
PieChart
},
data() {
return {
chartOptions: {
hoverBorderWidth: 20
},
chartData: {
hoverBackgroundColor: "red",
hoverBorderWidth: 10,
labels: ["Green", "Red", "Blue"],
datasets: [
{
label: "Data One",
backgroundColor: ["#41B883", "#E46651", "#00D8FF"],
data: [1, 10, 5]
}
]
}
};
}
};
</script>