diff --git a/src/component/internal/connection.ts b/src/component/internal/connection.ts
index 2866773a..5fd276ac 100644
--- a/src/component/internal/connection.ts
+++ b/src/component/internal/connection.ts
@@ -165,6 +165,9 @@ export class NekoConnection extends EventEmitter<NekoConnectionEvents> {
   public destroy() {
     this._websocket_reconn.destroy()
     this._webrtc_reconn.destroy()
+
+    Vue.set(this._state, 'type', 'none')
+    Vue.set(this._state, 'status', 'disconnected')
   }
 
   _webrtcQualityDowngrade(quality: string): string | undefined {
diff --git a/src/component/internal/reconnector/index.ts b/src/component/internal/reconnector/index.ts
index a725e877..c4d8be47 100644
--- a/src/component/internal/reconnector/index.ts
+++ b/src/component/internal/reconnector/index.ts
@@ -173,10 +173,7 @@ export class Reconnector extends EventEmitter<ReconnectorEvents> {
   }
 
   public destroy() {
-    if (this._timeout) {
-      window.clearTimeout(this._timeout)
-      this._timeout = undefined
-    }
+    this.close()
 
     this._conn.off('connect', this._onConnectHandle)
     this._conn.off('disconnect', this._onDisconnectHandle)
diff --git a/src/component/main.vue b/src/component/main.vue
index 253d409b..fee0d6c5 100644
--- a/src/component/main.vue
+++ b/src/component/main.vue
@@ -412,7 +412,6 @@
 
     beforeDestroy() {
       this.observer.disconnect()
-      this.connection.disconnect()
       this.connection.destroy()
       this.clear()