The vue2 environment uses mapbox 3.4.0 and lines cannot be displayed

mapbox-gl-js version:3.4.0

Question

vue2 environment uses mapbox version 3.4.0 When vector graphics are used, markers can be displayed normally, but lines cannot be displayed

handleRenderPath() {
     if (this.map.getLayer('trajectory-line')) {
       this.map.removeLayer('trajectory-line');
     }
     if (this.map.getSource('trajectory')) {
       this.map.removeSource('trajectory');
     }
     // 重新添加源和图层
     this.map.addSource('trajectory', {
       type: 'geojson',
       data: {
         type: 'FeatureCollection',
         geometry: {
           type: 'LineString',
           coordinates: this.pathCoordinates
         }
       }
     });
     this.map.addLayer({
       id: 'trajectory-line',
       type: 'line',
       source: 'trajectory',
       layout: {
         'line-join': 'round',
         'line-cap': 'round'
       },
       paint: {
         'line-color': '#888', // Customize color
         'line-width': 20, // Customize line width
         'line-opacity': 1 // Customize opacity
       }
     });
   },

Links to related documentation

https://docs.mapbox.com/mapbox-gl-js/example/zoomto-linestring/

Start by reproducing handleRenderPath() in the reported Vue 2 and mapbox-gl-js 3.4.0 setup, then compare its GeoJSON LineString source and line layer with the linked zoomto-linestring example. Done means determining why the trajectory line is not rendered and documenting or fixing that behavior so the line displays.