Fix base frequency encoding in URL

Access a reactive property to trigger the watcher.
Implement Cypress test to verify the fix.

ref #508

cypress/integration/basic.spec.ts

@@ -5,6 +5,19 @@ describe("Basic test", () => {
     cy.visit("/");
     cy.contains("h2", "Scale data");
   });
+
+  it("preserves the base frequency when changing tabs", () => {
+    cy.visit("/");
+    cy.get(".real-valued")
+      .clear()
+      .type("432")
+      .trigger("change")
+      .should("have.value", "432");
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
+    cy.wait(400); // Wait for debounce to expire.
+    cy.get("a").contains("Synth").click();
+    cy.url().should("contain", "f=");
+  });
 });
 
 describe("404 page", () => {

src/App.vue

@@ -240,7 +240,7 @@ watch(
   () => [
     scaleName.value,
     scaleLines.value,
-    scale,
+    scale.baseFrequency,
     baseMidiNote.value,
     keyColors.value,
     isomorphicHorizontal.value,