Page cannot be scaled, get error webview.set_webview_zoom not allowed on window "Gmgn"

[Sylor-huang]

My capabilities/default.json has been configured Gmgn

{
  "$schema": "../gen/schemas/desktop-schema.json",
  "identifier": "default",
  "description": "Capability for the main window",
  "windows": ["main", "Gmgn"],
  "permissions": [
    "core:default",
    "shell:allow-open",
    "core:webview:default",
    "core:webview:allow-create-webview-window",
    "core:webview:allow-set-webview-zoom",
    {
      "identifier": "core:webview:allow-set-webview-zoom",
      "allow": [
        {
          "url": "https://gmgn.ai/?chain=sol"
        }
      ],
      "deny": []
    }
  ]
}

My test Vue page

<template>
  <div>
    <el-link @click="openInNewWindow" class="mr-4">Open In New Browser</el-link>
    <el-link @click="openInBrowser">Open In Default Browser</el-link>
  </div>
</template>

<script setup>
import {WebviewWindow} from "@tauri-apps/api/webviewWindow";
import {open} from "@tauri-apps/plugin-shell";
const openInNewWindow = async () => {
  try {
    console.log(WebviewWindow);
    const webview = new WebviewWindow("Gmgn", {
      url: "https://gmgn.ai/?chain=sol",
      title: "Gmgn",
      width: 800,
      height: 600,
      resizable: true,
      center: true,
      zoomHotkeysEnabled: true,
      backgroundColor: "#000"
    });

    webview.once("tauri://created", async () => {
      // await webview.setZoom(0.6);
      console.log("webview successfully created");
    });

    webview.once("tauri://error", function (e) {
      console.log("error creating webview:", e);
    });
  } catch (error) {
    console.error("Error:", error);
  }
};

const openInBrowser = async () => {
  try {
    await open("https://google.com");
  } catch (error) {
    console.error("Failed to open in browser:", error);
  }
};
</script>

Please help, thanks.