Vue 3 최종 문법: 전체 통합

const{createApp,ref,computed,watch}=Vue;
createApp({
  setup(){
    const units=ref([{id:1,model:'T-800',threat:8,active:true},{id:2,model:'T-1000',threat:10,active:true},{id:3,model:'T-X',threat:9,active:false}]);
    const filter=ref('all');
    const search=ref('');
    const filtered=computed(()=>units.value.filter(u=>{
      if(filter.value==='active'&&!u.active)return false;
      if(filter.value==='inactive'&&u.active)return false;
      if(search.value&&!u.model.toLowerCase().includes(search.value.toLowerCase()))return false;
      return true;
    }));
    const totalThreat=computed(()=>filtered.value.reduce((s,u)=>s+u.threat,0));
    watch(totalThreat,(v)=>{if(v>=20)console.log('HIGH ALERT: Total threat',v);});
    const toggle=(id)=>{const u=units.value.find(u=>u.id===id);if(u)u.active=!u.active;};
    return{units,filter,search,filtered,totalThreat,toggle};
  },
  template:`<div>
    <input v-model='search' placeholder='검색...' style='background:#111;color:#e8e8e8;border:1px solid #333;padding:6px;font-family:monospace;font-size:11px;width:100%;box-sizing:border-box;margin-bottom:8px;'/>
    <div style='display:flex;gap:6px;margin-bottom:12px;'>
      <button v-for='f in ["all","active","inactive"]' :key='f' @click='filter=f' :style='{background:filter===f?"#10b981":"#1a1a1a",color:filter===f?"#080808":"#888"}' style='border:none;padding:4px 10px;cursor:pointer;font-size:10px;font-family:monospace;'>{{f.toUpperCase()}}</button>
    </div>
    <div v-for='u in filtered' :key='u.id' style='display:flex;justify-content:space-between;align-items:center;padding:6px;margin-bottom:4px;' :style='{background:u.active?"rgba(255,34,34,0.06)":"#0a0a0a"}'>
      <span :style='{color:u.active?"#f59e0b":"#555"}'>{{u.model}}</span>
      <span style='color:#888;font-size:10px;'>위협:{{u.threat}}</span>
      <button @click='toggle(u.id)' :style='{background:u.active?"#10b981":"#333"}' style='color:#080808;border:none;padding:2px 8px;cursor:pointer;font-size:10px;'>{{u.active?"OFF":"ON"}}</button>
    </div>
    <div style='margin-top:8px;font-size:10px;color:#555;'>총 위협도: <span style='color:#10b981;'>{{totalThreat}}</span></div>
  </div>`
}).mount('#final-out');