ref & reactive 해부: 반응형 상태

const { createApp, ref, reactive } = Vue;
createApp({
  setup() {
    const count = ref(0);
    const unit = reactive({ model: 'T-800', threat: 8, active: true });
    const increment = () => { count.value++; unit.threat = Math.min(10, unit.threat + 1); };
    return { count, unit, increment };
  },
  template: `
    <div>
      <div style='color:#f59e0b; margin-bottom:8px;'>ref count: {{ count }}</div>
      <div style='color:#888; margin-bottom:8px; font-size:11px;'>reactive: {{ unit.model }} 위협도:{{ unit.threat }}</div>
      <button @click='increment' style='background:#10b981; color:#080808; border:none; padding:6px 12px; cursor:pointer; font-family:monospace; font-size:11px;'>
        ESCALATE
      </button>
    </div>
  `
}).mount('#reactive-output');