How to render components in Vue with different v-shows?

Question

Vue.js

Good afternoon!
I'm just learning Vue.js, the following question arose:
there is a Vue instance and a component with its own template and list of variables. I need that when drawing elements, each element has its own v-show and, accordingly, its own conditions for display, in order to change their visibility in the future.
The code:

Vue.component('list__', {
    props: ['show','show2','show3', 'text'],
    template: ' \<transition  name="slide" >\
        \<div class="class">\
            \<div class="class-temp"><span class="class-temp-grad">{{text}}</span><span class="class-temp-C">&ordm;</span></div>\
            <div class="class-city"></div>\
        \</div>\
    </transition>\
  ',
})

var app = new Vue({
  el:"#app",
    data: {
            show:true,
            show2:false,
            show3:false,
            text:'',
            list:[],
    },
    created:function(){
        this.getWeather();
    },
    methods: {
        getWeather: function(event) {
            axios.get('url').then(response => {
                list=[
                          {
                            id: 1,
                            show: true,
                            show2: false,
                            show3: false,
          text: '123'
                          },
                          {
                            id: 2,
                            show: false,
                            show2: true,
                            show3: false,
          text: '123'
                          },
                          {
                            id: 3,
                            show:false,
                            show2: false,
                            show3: true,
         text: '123'
                          }
                    ]
                    this.list = list;
            }).catch(
                error => {
                    console.log(error);
                    alert("Ошибка");
                }
            );   
        },
    },
});

<list__ 
                        v-for="(todo, index) in list" 
                        v-bind:key="todo.id" 
                        v-bind:show="todo.show"
                        v-bind:show2="todo.show2"
                        v-bind:show3="todo.show3"
                        v-bind:text="todo.text"
                        v-show="todo.show && !todo.show2 && !todo.show3"
            >
                </list__>

Help, please, I'm studying Vue recently, I can't think of a solution.