Vuelayers projection problem (inexistant in OpenLayers)

Question

I have made a CodePen which shows what i am trying to do but my Vuelayers code produces a squished down version of the correct data. I have played around with ratio and projection but although it seems like the trouble is there I can not fix it. My best guess is that there are some defaults I can not see or manipulate.

 <template>
  <div>
    <v-container>
          <v-card>
            <vl-map 
              style="height: 650px"
              :load-tiles-while-animating="true" 
              :load-tiles-while-interacting="true"
              >

            <vl-view 
                :zoom="zoom" 
                :center="center" 
                />

            <vl-layer-tile>
                <vl-source-osm/>
            </vl-layer-tile>

            <vl-layer-image>
                <vl-source-image-wms
                    :url.sync='baseURL'
                    :layers.sync='layer'
                    :projection='projection'
                    :crossOrigin='crossOrigin'  
                    :ratio='ratio'
                    :serverType='serverType'
                    :attributions='customAttributions'
                >
                </vl-source-image-wms>
            </vl-layer-image>
             
            </vl-map>
    </v-container>
  </div>
</template>

<script>
    export default {
    data () {
      return { 
        baseURL: 'https://firms.modaps.eosdis.nasa.gov/wms/key/X/?BBOX=-180,-90,180,90',
        layer: "fires_viirs_24",
        serverType: 'geoserver',
        crossOrigin: 'anonymous',
        ratio:1,
        params: {'LAYERS': 'fires_viirs_24','VERSION' : '1.0.0'},
        zoom: 2,
        opacity: 0.5,
        center: [-75,45],
        projection: "EPSG:4326",

      }
    }
  }
</script>

Answer 1

I was missing a couple of fields here is the working example.

<vl-map 
   style="height: 650px"
   :load-tiles-while-animating="true" 
   :load-tiles-while-interacting="true"
   >

      <vl-view 
         :zoom.sync="zoom" 
         :center.sync="center" 
         />
            

      <vl-layer-tile>
         <vl-source-osm/>
      </vl-layer-tile>

              
      <vl-layer-image>
         <vl-source-image-wms
             :url.sync='baseURL'
             :layers.sync='layer'
             :version.sync='version'
             :projection='projection'
             :cross-origin='crossOrigin'  
             :ratio='ratio'
             :server-type='serverType'
             :attributions='customAttributions'
             />
      </vl-layer-image>    
  </vl-map>

baseURL: 'https://firms.modaps.eosdis.nasa.gov/wms/key/X/?BBOX=-180,-90,180,90',
layer: "fires_viirs_24",
serverType: 'geoserver',
version: '1.0.0',
crossOrigin: 'anonymous',
ratio: 1,
zoom: 4,
center: [-10683725, 4240631],
projection: "EPSG:4326",
customAttributions: '<a href="https://firms.modaps.eosdis.nasa.gov/web-services/">NASA\'s WMS hotspots service</a>',
layerNames: [ ... ]