Maps.vue

<template>
  <section id="map">
    <div id="grid-container-interactive">
      <div id="title">
        <h2 class="grid-title">
          <p>Map Title</p>
        </h2>
      </div>
    </div>
  </section>
</template>

<script>
  import * as d3Base from 'd3';
  import { isMobile } from 'mobile-device-detect';

  export default {
    name: "Maps",
    components: {
    },
    props: {
      data: Object
    },
    data() {
      return {
        publicPath: import.meta.env.BASE_URL, // find the files when on different deployment roots
        mobileView: isMobile, // test for mobile

      }
    },
    mounted(){      
      const self = this; 
    },
    methods:{
      isMobile() {
        if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
            return true
        } else {
            return false
        }
      }
    }
  }
</script>