Idea for a media query component...how would I want this to work

App.vue

<template>
  <div>
    <!-- Show acts as if you are setting display: block, flex, etc. -->
    <media-query max-width at="768" show>
      Hello World
    </media-query>
    
    <!-- Hide acts if you are setting display: hidden -->
    <media-query max-width at="992" hide>
      Hidden at 992 and above
    </media-query>
  </div>
</template>