diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 633995c94..a16a76abc 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -87,7 +87,7 @@ Configuration files are located in [`/.github/workflows`](/.github/workflows).
 
 ## Vue
 Misskey uses Vue(v3) as its front-end framework.
-**When creating a new component, please use the Composition API (and [setup sugar](https://v3.vuejs.org/api/sfc-script-setup.html)) instead of the Options API.**
+**When creating a new component, please use the Composition API (with [setup sugar](https://v3.vuejs.org/api/sfc-script-setup.html) and [ref sugar](https://github.com/vuejs/rfcs/discussions/369)) instead of the Options API.**
 Some of the existing components are implemented in the Options API, but it is an old implementation. Refactors that migrate those components to the Composition API are also welcome.
 
 ## Adding MisskeyRoom items
diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts
index 0611599a2..dbbbfc228 100644
--- a/packages/client/src/pizzax.ts
+++ b/packages/client/src/pizzax.ts
@@ -10,6 +10,8 @@ type StateDef = Record<string, {
 
 type ArrayElement<A> = A extends readonly (infer T)[] ? T : never;
 
+const connection = $i && stream.useChannel('main');
+
 export class Storage<T extends StateDef> {
 	public readonly key: string;
 	public readonly keyForLocalStorage: string;
@@ -20,8 +22,6 @@ export class Storage<T extends StateDef> {
 	public readonly state: { [K in keyof T]: T[K]['default'] };
 	public readonly reactiveState: { [K in keyof T]: Ref<T[K]['default']> };
 
-	private connection = stream.useChannel('main');
-
 	constructor(key: string, def: T) {
 		this.key = key;
 		this.keyForLocalStorage = 'pizzax::' + key;
@@ -73,8 +73,8 @@ export class Storage<T extends StateDef> {
 				});
 			}, 1);
 			// streamingのuser storage updateイベントを監視して更新
-			this.connection.on('registryUpdated', ({ scope, key, value }: { scope: string[], key: keyof T, value: T[typeof key]['default'] }) => {
-				if (scope[1] !== this.key || this.state[key] === value) return;
+			connection?.on('registryUpdated', ({ scope, key, value }: { scope: string[], key: keyof T, value: T[typeof key]['default'] }) => {
+				if (scope.length !== 2 || scope[0] !== 'client' || scope[1] !== this.key || this.state[key] === value) return;
 
 				this.state[key] = value;
 				this.reactiveState[key].value = value;