In VueJs, when changing a variable, v-if does not fire, why?

Question

Vue.js

It is necessary that when the value of search changes, the color of the buttons on top changes depending on the element of the tip array. Everything works and console log displays everything correctly, but for some reason v-if does not change the element.

<template>
  <div id="app">
    <div class="container">
      <div class="row-12 text-center pt-5">
        <h1>Проверка медицинского страхования</h1>
      </div>
      <div class="row-12 d-flex justify-content-center pt-5">
        <div class="btn-group" role="group">
          <button 
          type="button" 
          class="btn btn-danger"
          v-if="!tipStrah"
          @click="tipStrah = tipStrah + 1"
          >ОМС</button>
          <button 
          type="button" 
          class="btn btn-light"
          v-if="tipStrah"
          @click="tipStrah = !tipStrah"
          >ОМС</button>
          <button 
          type="button" 
          class="btn btn-danger"
          v-if="tipStrah"
          >ДМС</button>
          <button 
          type="button" 
          class="btn btn-light"
          v-if="!tipStrah"
          @click="tipStrah = tipStrah + 1"
          >ДМС</button>
        </div>
      </div>
      <form>
        <div class="row pt-5">
          <div class="col">
            <input type="text" 
            class="form-control round" 
            id="search" 
            v-model="search"
            placeholder="Введите номер полиса">
          </div>
          <div class="col">
            <div class="form-group">
              <select class="form-control round" 
              id="companyStrah">
                <option selected disabled
                style="display: none;">
                  Выберите страховую компанию
                </option>
                <option selected
                v-if="filteredPolis.length < 4"
                v-for="(polis, company) in filteredPolis">
                {{ polis.company }}
                </option>
                <option
                v-if="filteredPolis.length < 1"
                v-for="company in companys">
                {{ company.company }}
                </option>
              </select>
            </div>
          </div>
          <div class="col-12 pt-5">
            <label for="reqSer" class="pl-3">Выберите медицинские услуги</label>
            <input type="text" 
            class="form-control round mt-3" 
            id="reqSer" 
            placeholder="Введите запрашиваемую услугу для пациента">
          </div>
          <div class="col-12 pt-5 text-center">
            <button type="submit" class="btn btn btn-outline-danger round w-15 mt-5">Проверить</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
const polis = (number, company, tip, dataEnd, phone) => ({number, company, tip, dataEnd, phone});

const company = (company) => ({company});

const companys = [
company(),
company('СК МЕД-АСКЕР'),
company('СК Рандеву'),
company('Страх-трах')
]

const poliss = [
polis('1234 12345678', 'СК МЕД-АСКЕР', 'dmc', '14.08.2020', '8(495)123-45-67'),
polis('9876 543210', 'СК МЕД-АСКЕР', 'omc',
  '15.08.2021', '8(495)123-45-67'),
polis('1234-123456-78', 'СК Рандеву', 'dmc', '14.08.2020', '8(499)123-45-68'),
polis('98-76 5432-10', 'СК Рандеву', 'omc',
  '15.08.2021', '8(499)123-45-68'),
polis('12-341234-5678', 'Страх-трах', 'dmc', '14.08.2020', '8(812)123-45-69'),
polis('98-76 5432-10', 'Страх-трах', 'omc',
  '15.08.2021', '8(812)123-45-69')
]


export default {
  name: 'app',
  data () {
    return {
      companys, companys,
      poliss: poliss,
      search: '',
      tipStrah: ''
    }
  },
  computed: {
    filteredPolis() {
      return this.poliss.filter(polis => {
        return polis.number.indexOf(this.search) > -1
      })
    }
  },
  watch: {
    search: function(filteredPolis, tipStrah) {
      this.filteredPolis.forEach(polis => {
      if (polis.tip.indexOf('dmc')) {tipStrah = true}
      else if (polis.tip.indexOf('omc'))  {tipStrah = false}
      return tipStrah
      })
      console.log(tipStrah)
      return tipStrah
    }
  }
}
</script>

<style>
.round {
  border-radius: 25px;
}
.w-15 {
  width: 15%;
}
</style>

Answer 1

V-if is not made for styles. read the Documentation , the question will disappear

Answer 2

Here what are you trying to do?

watch: {
    search: function(filteredPolis, tipStrah) {
      this.filteredPolis.forEach(polis => {
      if (polis.tip.indexOf('dmc')) {tipStrah = true}
      else if (polis.tip.indexOf('omc'))  {tipStrah = false}
      return tipStrah
      })
      console.log(tipStrah)
      return tipStrah
    }

You have set a search watcher, and any changes to the search variable will cause

search(val) {
     val // это значение переменой search в data
      })