[Vuejs]-Vuejs variable from another js file is not updating

If you import a regular JS file, it will not be reactive because regular JS do not have the VueJS state wired to it, hence it will not be reactive.

Why do you not add the state directly into VueJS ? Or even use Vuex.

You can make it reactive by creating a function to set selected user from the JavaScript file and return callback function if user selected and listen to callback in vuejs component to update the selectedUser variable (the variable will be in vuejs component)

Component code :

<template>
  <div>
    user {{ selectedUser }}

    <button @click="update()"> Update user </button>
    
  </div>
</template>

<script>
import getUserData from './GetUser';
import updateUser from './UpdateUser';

import {ref} from 'vue'
export default {
  name: 'HelloWorld',

  setup(){
    let selectedUser = ref('ahmed');
    const userData = getUserData();

    function update(){
      updateUser(selectedUser, (theNewValue) => {
        // to be reactive
        selectedUser.value = theNewValue;
      });
    }
    return {...userData, update, selectedUser};

  }

}

User file :

export default function updateUser(selectedUser, updated){
    selectedUser = 'new value';
    alert(`User Updated Successfully ${selectedUser}`);
    // pass new value to get it from vuejs component
    updated(selectedUser)
}