JSFiddle - React, Tailwind, and code Playground

HTML

<template id="listjobs-template">
        <div  class="job" >
            <!--h2>{{ id }}</h2-->
            <div class="div_job"  >
                {{ name }}
            </div>
            <div class="div_num_job" >{{num_jobs}}</div>

            <div style="background-color:red; direction: rtl; " v-on:click.stop="open_div_sub_kategory(id)"> בלחיצה כאן לא אמור להיות הודעת OK, ולמרות זאת יש
            </div>
            <div class="div_sub_kategory no_list_event_parent" v-bind:class="{'open_div_sub_kategory': in_select == true }" >
                    {{ in_select }}
            </div>
        </div>
</template>

        <div id="app">
  <div style="
                padding: 10px;
                background-color: #fcf8e3;
                min-width: 310px;
            ">
                
                <div class="div_kategory"
                        onclick="alert('ok')" 
                        style="color: black;
                            
                            text-align: center;
                    " v-for="list in jobs ">
                    <listjobs 
                      :id=list.id 
                      :name=list.name 
                      :num_jobs=list.num_jobs 
                      :in_select=list.in_select>
                      
                    </listjobs>
                </div>

            </div>
            
    
  </div>

CSS

html{
  text-align: right;
}
.job {
        display: flex;
        flex-flow: row wrap;
        margin: 10px;
        padding: 5px;
        
    }
    .div_job {
        min-width: 75%;
        text-align: right;
        padding: 5px;
        flex: 1 0 auto;
    }
    .div_num_job {
        padding: 5px;
        text-align: center;
        min-width: 15%;
        flex: 1 0 auto;
        max-width: 35px;;
    }
    .div_kategory{
        background-color: white;
        flex: 1 0 auto;
    }
    .jobs_selected{
        color: red;
        background-color: rgb(252, 227, 227);
    }
    .div_sub_kategory{
        display:none;
    }
    .open_div_sub_kategory{
        display:contents;
    }

Vue

Vue.component('listjobs', {
            template: '#listjobs-template',
            props: ['id', 'name','num_jobs','in_select'],
            methods:{
                open_div_sub_kategory:function(id){
                    
                    app.$data.jobs[id].in_select = !(app.$data.jobs[id].in_select)
                }
            }
            
            

        
        })
    
app = new Vue({
  el: "#app",
  data: {
    "jobs":{"22":{"id":"22","name":"חנויות","in_select":false,"num_jobs":5},"26":{"id":"26","name":"משרדים","in_select":false,"num_jobs":6}
  },
  
  methods: {
  	
  }
}})

list = document.getElementsByClassName('no_list_event_parent');

for (index = 0; index < list.length; ++index) {
            list[index].addEventListener('click', event => event.stopPropagation());
        }