How to use the @vue/composition-api.watch function in @vue/composition-api

if (process.env.NODE_ENV !== "production") {
                    console.warn(`[pageSize] expected number but got: '${typeof v}' value: '${v}'`);
                }
                return;
            }
            _pageSize.value = v;
        }
    });
    const lastPage = compositionApi.computed(() => Math.ceil(total.value / pageSize.value));
    // make sure the current page is the correct value
    currentPage.value = _currentPage.value;
    const prev = () => --currentPage.value;
    const next = () => ++currentPage.value;
    const first = () => (currentPage.value = 1);
    const last = () => (currentPage.value = lastPage.value);
    compositionApi.watch([total, pageSize], () => {
        if (currentPage.value > lastPage.value) {
            currentPage.value = lastPage.value;
        }
    }, { lazy: true } // no need to run on first render
    );
    return {
        // Mutable state
        pageSize,
        total,
        currentPage,
        offset,
        // Computed
        lastPage,
        // Functions
        next,
        prev,

constructor() {
    // FIXME Maybe all of the clocks could share one "ticker"?? IDK? Then we wouldn't have to "watch" the BBM
    // Note, this will run automatically
    watch(Context.BPM, () => {
      this.clock.frequency.value = 1 / (60 / Context.BPM.value / Context.PPQ);
    });
  }

}
      _pageSize.value = v;
    }
  });

  const lastPage = computed(() => Math.ceil(total.value / pageSize.value));
  // make sure the current page is the correct value
  currentPage.value = _currentPage.value;


  const prev = () => --currentPage.value;
  const next = () => ++currentPage.value;
  const first = () => (currentPage.value = 1);
  const last = () => (currentPage.value = lastPage.value);

  watch(
    [total, pageSize],
    () => {
      if (currentPage.value > lastPage.value) {
        currentPage.value = lastPage.value;
      }
    },
    { lazy: true } // no need to run on first render
  );

  return {
    // Mutable state
    pageSize,
    total,
    currentPage,
    offset,

width: `${zoomX.value - 0.5}px`,
        height: `${zoomY.value - 0.5}px`,
      }
    } else {
      return null
    }
  })

  const updatePixelIntensity = throttle(() => {
    // WORKAROUND: el-tooltip and el-popover don't correctly open if they're mounted in an already-visible state
    // Calling updatePopper causes it to refresh its visibility
    if (pixelIntensityTooltipRef.value != null) {
      pixelIntensityTooltipRef.value.updatePopper()
    }
  })
  watch(pixelIntensityStyle, () => {
    Vue.nextTick(updatePixelIntensity)
  })

  const movePixelIntensity = (clientX: number | null, clientY: number | null) => {
    if (imageLoaderRef.value != null && props.ionImage != null && clientX != null && clientY != null) {
      const rect = imageLoaderRef.value.getBoundingClientRect()
      const { width = 0, height = 0 } = props.ionImage
      // Includes a 2px offset up and left so that the selected pixel is less obscured by the mouse cursor
      const x = Math.floor((clientX - (rect.left + rect.right) / 2 - 2)
        / zoomX.value - props.xOffset + width / 2)
      const y = Math.floor((clientY - (rect.top + rect.bottom) / 2 - 2)
        / zoomY.value - props.yOffset + height / 2)

      cursorPixelPos.value = [x, y]
    } else {
      cursorPixelPos.value = null

const retryDelay = n => {
      switch (mode.value) {
        case "delay":
          return delay.value;
        case "backoff":
          return exponentialDelay(n);
      }
    };

    const { json, loading, exec: fetchExec, error, status } = useFetch();
    const { isRetrying, nextRetry, retryCount, exec } = useRetry({
      retryDelay
    });

    watch(id, id => {
      exec(() => {
        if (throwError.value) {
          throw new Error("blocked");
        }
        return fetchExec(`https://reqres.in/api/user/${id}`);
      });
    });

    // just to have a nice countdown
    setInterval(() => (dateNow.value = Date.now()), 10);

    return {
      id,
      json,
      loading,
      status,

setup(props) {
    const active = ref(!props.track.mute);
    watch(active, () => {
      props.track.mute = !active.value;
    });

    return {
      active,
      color: computed(() => base.theme.error),
    };
  },
});

export function useStoredCode (storageKey, defaultCode) {
  const code = ref(localStorage.getItem(storageKey) || defaultCode)

  watch(code, value => {
    localStorage.setItem(storageKey, value)
  })

  return {
    code,
  }
}

setup() {
    const id = ref(1);
    const { data, loading, exec, error, status } = useAxios();

    watch(id, id => {
      exec({
        method: "GET",
        url: "https://reqres.in/api/user/" + id
      });
    });

    return {
      id,
      data,
      loading,
      status
    };
  }
};

project.startTransport();
      }
    }

    function stopRecording() {
      transport = null;
      recording.value = !recording.value;
      project.stopTransport();
    }

    const props = {
      color: theme['text-default'],
      size: '14px',
    };

    watch(recording, () => {
      props.color = recording.value ? theme.error : theme['text-default'];
    });

    pianoRoll.addAction({
      icon: ref('fiber_manual_record'),
      tooltip: computed(() => recording.value ? 'Stop Recording' : 'Start Recording'),
      callback: () => {
        if (recording.value) {
          stopRecording();
        } else {
          startRecording();
        }
      },
      props,
    });
  },

function track (loading: Ref, type: keyof LoadingTracking) {
  const { appTracking, tracking } = getCurrentTracking()

  watch(loading, (value, oldValue) => {
    if (oldValue != null && value !== oldValue) {
      const mod = value ? 1 : -1
      tracking[type].value += mod
      appTracking[type].value += mod
    }
  })

  onBeforeUnmount(() => {
    if (loading.value) {
      tracking[type].value--
      appTracking[type].value--
    }
  })
}