Making a map and location

#1

What seems to be the problem:

VUE application using java script for mapping (locations) leaflet convert to livewire

Steps to Reproduce:

I dont have a problem I need some advice

Are you using the latest version of Livewire:

yes

Do you have any screenshots or code examples:

Hello friends I need some advice on how to upgrade to livewire coming from vue.

I mean the problem is, I am using VUE for leaflet and my VUE components look like this:

<template>

  <div style="height: 350px;">
    <div class="info" style="height: 15%">
      <span>Center: {{ center }}</span>
      <span>Zoom: {{ zoom }}</span>
      <span>Bounds: {{ bounds }}</span>
    </div>
    <l-map
      style="height: 80%; width: 100%"
      :zoom="zoom"
      :center="center"
      @update:zoom="zoomUpdated"
      @update:center="centerUpdated"
      @update:bounds="boundsUpdated"
    >
      <l-tile-layer :url="url"></l-tile-layer>
    </l-map>
  </div>
</template>

<script>
import {LMap, LTileLayer} from 'vue2-leaflet';

export default {
  components: {
    LMap,
    LTileLayer,
  },
  data () {
    return {
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      zoom: 3,
      center: [47.413220, -1.219482],
      bounds: null
    };
  },
  methods: {
    zoomUpdated (zoom) {
      this.zoom = zoom;
    },
    centerUpdated (center) {
      this.center = center;
    },
    boundsUpdated (bounds) {
      this.bounds = bounds;
    }
  }
}
</script>

How do i switch to livewire and still keep all my java script functionality?

I mean the template part I can easily convert to a livewire component but what do I do with the script part?