Refactor watch sources for reliability

This commit changes `WatchSource` signatures into `Readonly<Ref>`s.

It provides two important benefits:

1. Eliminates the possibility of `undefined` states, that's result of
   using `WatchSource`s. This previously required additional null checks.
   By using `Readonly<Ref>`, the state handling becomes simpler and less
   susceptible to null errors.
2. Optimizes performance by using references:
   - Avoids the reactive layer of `computed` references when not needed.
   - The `watch` syntax, such as `watch(() => ref.value)`, can introduce
     side effects. For example, it does not account for `triggerRef` in
     scenarios where the value remains unchanged, preventing the watcher
     from running (vuejs/core#9579).

src/presentation/components/Scripts/View/Tree/ScriptsTree.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, toRef } from 'vue';
 import { injectKey } from '@/presentation/injectionSymbols';
 import TreeView from './TreeView/TreeView.vue';
 import NodeContent from './NodeContent/NodeContent.vue';
@@ -42,7 +42,7 @@ export default defineComponent({
     const useUserCollectionStateHook = injectKey((keys) => keys.useUserSelectionState);
     const { selectedScriptNodeIds } = useSelectedScriptNodeIds(useUserCollectionStateHook);
     const { latestFilterEvent } = useTreeViewFilterEvent();
-    const { treeViewInputNodes } = useTreeViewNodeInput(() => props.categoryId);
+    const { treeViewInputNodes } = useTreeViewNodeInput(toRef(props, 'categoryId'));
     const { updateNodeSelection } = useCollectionSelectionStateUpdater(useUserCollectionStateHook);
 
     function handleNodeChangedEvent(event: TreeNodeStateChangedEmittedEvent) {