LiveWire with Google Maps Question

I am using Livewire with GoogleMaps. From inside the Javascript I use
@this.set(‘vlat’,tlat);
To update my livewire Public $vlat. This works and it fires off
public function updatedvlat()
{

}
Which I can then handle. I am also then using the Google Geodecoder to get the address of the Lat/Lng, saving that to public $googaddr; along with its accuracy string.
I am showing these fields in my view, I can see that the fields are being updated, I can store them on the database, but when the view renders these fields are not updated in the view.
I can get the view to update by manually refreshing the browser. How do I get the view to update dynamically?

I am using the latest version of LiveWire.

My GoogleMaps Javascript.

function initMap() {
var myLatLng = {lat: {{ $Llat }}, lng: {{ $Llong }}};
var map = new google.maps.Map(document.getElementById(‘map’), {
zoom: 14,
center: {lat: {{ $Llat }}, lng: {{ $Llong }}}
});

    var myMarker = new google.maps.Marker({
          map: map,
          draggable: true,
          position: myLatLng
        });
    google.maps.event.addListener(myMarker, 'dragend', function(evt){
          var posish = myMarker.getPosition();
          var tlat = posish.lat();
          var tlong = posish.lng();  
          @this.set('vlat',tlat);
          @this.set('vlong',tlong);
        });

     

    var geocoder = new google.maps.Geocoder();

    document.getElementById('geocode').addEventListener('click', function() {
      geocodeAddress(geocoder, map);
    });
  }

  function geocodeAddress(geocoder, resultsMap) {
    var address = document.getElementById('address').value;
    geocoder.geocode({'address': address}, function(results, status) {
      if (status === 'OK') {
        resultsMap.setCenter(results[0].geometry.location);
        var tlat = results[0].geometry.location.lat();
        var tlong = results[0].geometry.location.lng();            
        @this.set('vlat',tlat);
        @this.set('vlong',tlong);
        var myMarker = new google.maps.Marker({
          map: resultsMap,
          draggable: true,
          position: results[0].geometry.location
        });
        google.maps.event.addListener(myMarker, 'dragend', function(evt){
          var posish = myMarker.getPosition();
          var tlat = posish.lat();
          var tlong = posish.lng();  
          @this.set('vlat',tlat);
          @this.set('vlong',tlong);
        });
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  } 

The Backend PHP
public function updatedvlat()
{
$villa = villa::find($this->vid);
$villa->vlat = $this->vlat;
$villa->save();
}

public function updatedvlong()
{

    $villa = villa::find($this->vid);
    $villa->vlong = $this->vlong;        
     
    $GAddress="https://maps.googleapis.com/maps/api/geocode/json?latlng=" . $this->vlat . "," . $this->vlong . "&key=my googlemaps apikey";
    $gmapsaddr=file_get_contents($GAddress);    
    $gmapaddr2=json_decode($gmapsaddr,true);
      //dd($gmapaddr2);

    $fhno= $gmapaddr2['results'][0]['formatted_address'];
    $accr= $gmapaddr2['results'][0]['geometry']['location_type'];
    $villa->googaddr = $fhno;
    $villa->googaccr = $accr;
    $googmsg = "Address from Googlemaps coordinates:" . $fhno . " accuracy:" . $accr;
    $this->msg = $googmsg;
    $villa->save();      
}

Answered my own question…

I needed to put the Style.

#map { height: 400px; width:500px; }

The map container INSIDE the div.
"Make sure your Blade view only has ONE root element."

Rookie error!