How to declare an array outside function in vue's component syntax - vue.js

Question

I want to declare a global array inside vue.js component, so that I can access it in all the methods. Where do I declare it in which part of component?
I have tried setting in PROPS but it produces an object while I need an array type.
export default{
name:"BarElement",
props:[
"labels",
"dataset",
"colors"
],
methods:{
drawGraph() {
var dataPoints =[];
var dataPoint =this.getDataPoint(upperLeftCornerX,nextX,value);
this.dataPoints.push(dataPoint);
}
getDataPoint(x, nextX, value) {
return {
'leftEdge':x,
'rightEdge':nextX,
'value':value
}
},
showToolTip(event) {
var mouseX = event.offsetX;
var toolTipVal = this.dataPoints.forEach(function(item, key) {
if(mouseX >= item.leftEdge && mouseX <= item.leftEdge )
return item.value;
});
console.log(toolTipVal);
}
}

Answer 1

Try to declare it inside the data object
data () {
myArray:[]
}
You can also declare props as an object, as this will allow to specify the type of the props
props: {
labels: Array,
dataset: Array,
colors: Object
}
If you want all your components of that type to share the same array, declare it outside of the export default statement.

Answer 2

Well, Inside your component you can declare with data as function and that will be locally to your function.
name: "BarElement",
props: ["labels", "dataset", "colors"],
data: function() {
return {
foo: {
text: 'text1'
}
}
}
In case If you want to declare a global array in your app component.
Similar to the component, you can able to add the data inside it.
Now, to access that data, you can use it with this.$root.[nameOfObject].
Here are the official docs for $root
Hope this helps!