diff --git a/src/mapboxgl/web-map/control/legend/Legend.vue b/src/mapboxgl/web-map/control/legend/Legend.vue
index fa12a018..58f53207 100644
--- a/src/mapboxgl/web-map/control/legend/Legend.vue
+++ b/src/mapboxgl/web-map/control/legend/Legend.vue
@@ -161,8 +161,10 @@ export default {
       }
     }
   },
-  loaded() {
+  created() {
     this.viewModel = new LegendViewModel();
+  },
+  loaded() {
     this.initLegendList();
   },
   removed() {
diff --git a/src/mapboxgl/web-map/control/legend/__tests__/legend.spec.js b/src/mapboxgl/web-map/control/legend/__tests__/legend.spec.js
index d611993a..80bca9c9 100644
--- a/src/mapboxgl/web-map/control/legend/__tests__/legend.spec.js
+++ b/src/mapboxgl/web-map/control/legend/__tests__/legend.spec.js
@@ -26,8 +26,6 @@ describe('Legend.vue', () => {
     };
   };
 
-  beforeEach(() => {});
-
   afterEach(() => {
     jest.resetAllMocks();
     if (wrapper) {
@@ -48,11 +46,10 @@ describe('Legend.vue', () => {
     const webmap = {
       getLegendInfo: () => mapLegends
     };
-    wrapper.vm.$options.loaded.call(wrapper.vm);
     wrapper.vm.viewModel.setMap({
       webmap
     });
-    wrapper.vm.initLegendList();
+    wrapper.vm.$options.loaded.call(wrapper.vm);
     await wrapper.vm.$nextTick();
     expect(wrapper.vm.legendList).not.toEqual({});
     expect(wrapper.vm.mapTarget).toBe('map');