I want to update the reactive values of Vue.js 3 using a method written in an external file

I want to update the reactive values of Vue.js 3 using a method defined in an external file.
(e.g.)
I am studying Vue.js 3. First, I want to pass reactive values to a method defined in an external file and update the values.

I created a count component for testing purposes. In the increment1 method, the value gets updated (the number on the screen increases), but in the increment2 method, the value does not get updated. What modifications are necessary to update the value in the increment2 method?

Relevant Source Code

<script setup lang="ts">
import { Ref, ref } from 'vue';
import { increment as increment2 } from './increment';

const count = ref(0);
const increment1 = () => {
  count.value++;
}

</script>

<template>
  <main>
      <p>Counter Value</p>
      <p>{{ count }}</p>
\      <button @click="increment1()">Action1</button>
\      <button @click="increment2(count)">Action2</button>
  </main>
</template>

export const increment = (count: number) => {
  count++;
}

FW/Tool versions:

Vue.js 3.2.27
TypeScript 4.7.4

Refs when used in the template are automatically unwrapped, meaning your line

@click="increment2(count)"

is equivalent to

@click="increment2(count.value)"

Which is not reactive. What you want to do is send the actual count ref, which can only be done within your <script> tag

import { increment } from "./increment.js";

const increment2 = () => {
  increment(count);
};

<button @click="increment2">Action2</button>