How to initiliaze data with props value without call the props in template? - vue.js

Question

I have props structured like this.
props: {
propsChooseColor: {
type: String,
required: true
}
}
The props received as expected(checked with vue devtools).
And then I try to initialize data with the props value like the official suggestion.
chooseColor: this.propsChooseColor
The problem is :
If I call chooseColor and propsChooseColor in template, the
chooseColor have same value as the props.
But if I don't call propsChooseColor, the chooseColor value is "".
E.g Value of chooseColor will empty.
<template>
...
data color: {{ chooseColor }} // RETURN ""
...
</template>
E.g Value of chooseColor will same as propsChooseColor.
<template>
...
data color: {{ chooseColor }} // RETURN BLACK
props color: {{ propsChooseColor }} // RETURN BLACK
...
</template>
I try to debug it and found that beforeUpdate hook is called if the props called in template.
What is happening? How do I initialize data without call the props? Approach usinh Computed property might not suited because i need to modify the data.
Edit. I also fetching data in the root component beforeRouteEnter hook like this.
beforeRouteEnter (to, from, next) {
const _id = to.query._id
const size = to.query.size
const color = to.query.color
axios.get(`http://localhost:8081/api/product-details/${_id}`)
.then(response => {
next(vm => {
vm.id = _id
vm.chooseSize = size
vm.chooseColor = color
vm.product = JSON.parse(JSON.stringify(response.data))
axios.get(`http://localhost:8081/api/product/all-seller/${vm.product.product_fullName}`)
.then(response => {
vm.productAllSeller = JSON.parse(JSON.stringify(response.data))
vm.fetchdataComplete = true
})
})
})
}