Puedo ver que estas utilizando vuetify, te doy algunos ejemplos utilizando una forma mas entendible para que observes el componente.
Existen un problema y es que v-if
como como se expresa en la documentación de VUE en v-if vs v-show, v-if
tiene costos de alternancia más altos por lo que puede perderse el cambio de un dato si este es comprometido, v-if
es optimo para la renderización inicial del componente, ya que solo se utilizaría correctamente si este dato no cambiará constantemente. Por lo que seria mas adecuado utilizar v-show
ya que este solo modifica la propiedad display
del estilo de la etiqueta. Mas sin embargo parece que estas utilizando un dato de suma importancia, por lo que te invito a manejar esta data a través de watchers como lo dice @BetaM en su comentario, mira los siguientes ejemplos.
CON V-SHOW:
Vue.component("v-icon", {
template: `<div>
<i :style="{color:color, 'margin-top':'15px'}" :data-feather="type"></i>
<p>{{color}}</p>
<div>`,
props: ["type","color"],
mounted() {
console.log(this.color)
feather.replace()
}
})
let app = new Vue({
el: "#app",
data() {
return {
tips:0
}
}
})
body {
display:flex;
align-items:center;
justify-content: center;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.28.0/feather.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.28.0/feather.js"></script>
<div id="app">
<p>{{tips}}</p>
<button @click="tips--" type="number" v-model="tips">-</button>
<button @click="tips++" type="number" v-model="tips">+</button>
<v-icon v-icon small v-show="tips == 0" :color='"blue"' :type="'check-circle'"></v-icon>
<v-icon small v-show="tips == 1" :color="'red'" :type="'alert-octagon'"></v-icon>
<v-icon small v-show="tips == 2" :color="'green'" :type="'help-circle'"></v-icon>
</div>
CON WATCHERS:
Vue.component("v-icon", {
template: `<div>
<div :style="{'color':color, 'margin-top':'15px'}" v-html="toSvg"></div>
<p>{{color}}</p>
<div>`,
data() {
return {
type: "alert-octagon",
color: "red"
}
},
props: ["tips"],
computed: {
// PROPIEDAD COMPUTADA INDIFERENTE PARA OBTENER EL ICONO FEATHER RENDERIZADO
toSvg() {
return feather.toSvg(this.type)
}
},
watch: {
// MRAMOS LOS CAMBIOS DE LA PROPIEDAD TIPS
tips(val) {
// UTILIZAMOS LA LOGICA CONVENIENTE PARA CLASIFICAR FOO...
val = Number(val)
switch(val) {
case 1:
console.log(val)
this.color = "blue";
this.type = "check-circle";
break;
case 2:
this.color = "green";
this.type = "help-circle";
break;
default:
this.color = "red";
this.type = "alert-octagon";
break;
}
}
}
})
let app = new Vue({
el: "#app",
data() {
return {
tips:0
}
}
})
body {
background: white;
color: #323232;
font-weight: 300;
height: 100vh;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-family: Helvetica neue, roboto;
}
img {
width: 56px;
height: 48px;
}
h1 {
font-weight: 200;
font-style: 26px;
margin: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.28.0/feather.js"></script>
<div id="app">
<p>{{tips}}</p>
<button @click="tips--" type="number" v-model="tips">-</button>
<button @click="tips++" type="number" v-model="tips">+</button>
<v-icon v-icon :tips="tips"></v-icon>
</div>
Básicamente la idea de trabajar con los watchers es que el componente hijo esté sujeto a cambios y se convierta en un componente mas dinámico, esto por supuesto ayuda a la carga y al renderizado, por otro lado la via sencilla es el primer ejemplo.
Un saludo, espero que te haya sido de ayuda.