I'm trying to understand if there is any significant difference between declaring a variable vs declaring a new Vue data property to assign values. (other than reusability and reactivity using Vue data property).
Example -
//Using variable
var result = "Passed";
//Using Vue data property
this.result = "Passed";
As you stated, creating a property with a value as a data property will allow it to be tracked in Vue's reactivity system. It will make that property available in the template section of your component whereas creating a standard variable will not be available this way.
Such as:
<template>
<div>{{greeting}}</div>
</template>
<script>
export default {
data () {
return {
greeting: 'hi',
}
}
}
</script>Something to keep in mind, especially as you are scaling an app and it get's bigger, or you anticipate it will get bigger - is to only track data properties that are intended to be reactive. Storing static values as data properties is wasteful and can end up bogging down your app as it grows - because Vue has to track each of those properties for reactivity.
Basically, if you need a variable to be reactive, or exposed to the component template, create a data property for it. Hopefully that is straight forward and I explained it well.
Here are the Vue docs: https://v3.vuejs.org/guide/data-methods.html#data-properties