Как вызвать событие при наведении курсора мыши и отключении мыши только с экранов планшета до Vue.js?

Question

Я бы хотел функциональность , которая работает только с экранов планшетов до .Вот чем я сейчас занимаюсь: @mouseover="$emit('activate', title)" **@mouseout="$emit('activate', null)"**.Но мне бы хотелось, чтобы это событие происходило только от средних экранов до.Я использую попутный ветер как для CSS .Можно ли связать это событие с md: hover попутный ветер класс ?

<template>
  <div  @mouseover="$emit('activate', title)" @mouseout="$emit('activate', null)" class="bg-white rounded shadow md:w-1/3 md:hover xl:w-1/5 relative md:h-full pl-4 pr-3 md:px-6 py-4 md:pt-14 mx-4 mt-4">
    <div class="inline-flex md:block justify-start">
      <img :src="imgSource" :alt="text" class="w-12 h-12"> 
      <div class="ml-4 md:ml-0 mt-1 md:mt-2">
        <h3 class="text-left md:text-center">{{ title }}</h3>
        <p class="-mt-2 md:mt-2 mt-1 md:mt-2 text-xs md:text-base text-grey text-left">{{ text }}</p>
        <div v-if="expanded" class="flex flex-col flex-start">
            <div class="inline-flex items-end p-2">
                <img src="/images/pre-sign-onboarding/Icons-Validate-Green.svg" :alt="itemOne" class="w-4 h-4">  
                    <p class="-mt-2 -mb-2 md:mt-2 mt-1 md:mt-2 text-xs md:text-base text-grey text-left">{{ itemOne }}</p>
            </div>
            <div class="inline-flex items-end p-2">
                <img src="/images/pre-sign-onboarding/Icons-Validate-Green.svg" :alt="itemTwo" class="w-4 h-4">  
                    <p class="-mt-2 -mb-2 md:mt-2 mt-1 md:mt-2 text-xs md:text-base text-grey text-left">{{ itemTwo }}</p>
            </div>
             <div class="inline-flex items-end p-2">
                <img :src="iconSource" :alt="itemThree" class="w-4 h-4">  
                    <p class="-mt-2 -mb-2 md:mt-2 mt-1 md:mt-2 text-xs md:text-base text-grey text-left">{{ itemThree }}</p>
            </div>
        </div>
        </div>
      </div>
      <button v-if="expanded" class="btn btn-pink w-32 text-center px-2 mt-2 md:mt-4 py-2" @click="select">Select</button>
      <div class="md:hidden absolute pin-r pin-b mb-2 mr-4" @click="$emit('activate', title)">
        <img v-if="!expanded" src="/images/pre-sign-onboarding/Icons - Disclosure Off.svg" alt="CheckboxEmpty" class="h-4 w-4">
      </div> 
    </div>
</template>