[Vuejs]-Tracking data changes in Vue.js on a Javascript that already exists?

Vue creates all the data variables, computed properties and values returned from methods reactive. in your case since you
are changing hex, which is not a vue variable, so vue will not detect any changes in this variable. However if you change message variable, it will be reflective and will be changed in the template.

It looks like you may have made things unnecessarily difficult. Just access your Vue instance via app?

Always make sure you go through the setters generated by Vue.js. These are watched and will re-render your component.

Instead, try using

app.turn_phase = 'unit_placement';

You can get a better understanding here, Reactivity