clean up, remove comments: <script setup>
import { onMounted, ref, reactive, watchEffect } from 'vue';
import {comma } from '@/assets/countries.js';

const props = defineProps({
    uuid:  Number,
    country: Number || String || Object,
    title: String,
    countryName: String,
});

const identifier = ref(String(props.title).toLocaleLowerCase().replace(' ', '-'));
const random = ref(Math.floor(Math.random() * 100) + 35);


onMounted(()=>{
  gsap.fromTo(`#${identifier.value}-${props.uuid}`, {
      marginTop: 10,
      duration: 0.3,
      opacity: 0,
      x:-150,
      scale:0.1,
      stagger: 0.8
    },{
      marginTop: 0,
      duration: 0.4,
      opacity: 1,
      x:0,
      scale: 1.1,
    },'-=0.39');
})

/* Smoothed number count anims */

const tweened = reactive({
  number: 0
})

function callAnim(n){
 gsap.to(tweened, { duration: 0.35, number: Number(n) || 0}) 
}


watchEffect(()=>{
  return callAnim(props.country)
})

function updateNum(){
  return comma(tweened.number.toFixed(0))
}

</script>

<template>

            <Flicking :options="{  gap: 10, circular: true, deceleration: 0.015, moveType: 'freeScroll' }">
              <div class="properties mx-2 ">
                
            <div v-if="identifier === 'defense-budget' && country >= 0 " >
              <div class="btn shadow-none ">
                <div class="overflow-hidden hover-effect ">{{title}}</div>
                <p  class=" z-index-down " :title="props.title" :id="identifier + '-'+uuid">
                 <span  class="text-main" v-if="country > 0">{{ "$" + updateNum() }}</span> 
                 <p v-if="country <= 0" :style="{'width': random+'px' }" class="  position-relative">
                    </p>
                </p>
              </div>
            </div>
            <div v-if="identifier === 'manpower' && country >= 0 ">
              <div class="btn shadow-none ">
                <div class="overflow-hidden hover-effect">{{title}}</div>
                <p  class=" z-index-down" :title="props.title" :id="identifier + '-'+uuid">
                 <span  class="text-main" v-if="country > 0">{{ updateNum() }}</span> 
                 <p v-if="country <= 0" :style="{'width': random+'px' }" class="  position-relative">
                    </p>
                </p>
              </div>
            </div>
            <div v-if="identifier === 'active' && country >= 0 " >
              <div class="btn shadow-none ">
                <div class="overflow-hidden hover-effect">{{title}}</div>
                <p  class=" z-index-down" :title="props.title" :id="identifier + '-'+uuid">
                 <span  class="text-main" v-if="country > 0">{{ updateNum() }}</span> 
                 <p v-if="country <= 0" :style="{'width': random+'px' }" class="  position-relative">
                    </p>
                </p>
              </div>
            </div>
            <div v-if="identifier === 'reserves' && country >= 0 "  >
              <div class="btn shadow-none ">
                <div class="overflow-hidden hover-effect">{{title}}</div>
                <p  class=" z-index-down" :title="props.title" :id="identifier + '-'+uuid">
                 <span  class="text-main" v-if="country > 0">{{ updateNum() }}</span> 
                 <p v-if="country <= 0" :style="{'width': random+'px' }" class="  position-relative">
                    </p>
                </p>
              </div>
            </div>
            <div v-if="identifier === 'land-area' && country >= 0 " >
              <div class="btn shadow-none ">
                <div class="overflow-hidden hover-effect">{{title}}</div>
                <p  class=" z-index-down" :title="props.title" :id="identifier + '-'+uuid">
                 <span  class="text-main" v-if="country > 0">{{ updateNum() + ' km²' }}</span> 
                 <p v-if="country <= 0" :style="{'width': random+'px' }" class="  position-relative">
                    </p>
                </p>
              </div>
            </div>
            <div v-if="identifier === 'oil' && country >= 0 " >
              <div class="btn shadow-none ">
                <div class="overflow-hidden hover-effect">{{title}}</div>
                <p  class=" z-index-down" :title="props.title" :id="identifier + '-'+uuid">
                 <span  class="text-main" v-if="country > 0">{{  updateNum() + ' bbl' }}</span> 
                 <p v-if="country <= 0" :style="{'width': random+'px' }" class="  position-relative">
                    </p>
                </p>
              </div>
            </div>
            <div v-if="identifier === 'gdp' && country >= 0 "  >
              <div class="btn shadow-none ">
                <div class="overflow-hidden hover-effect">{{title}}</div>
                <p  class=" z-index-down" :title="props.title" :id="identifier + '-'+uuid">
                 <span  class="text-main" v-if="country > 0">{{ "$" + updateNum() }}</span> 
                 <p v-if="country <= 0" :style="{'width': random+'px' }" class="  position-relative">
                    </p>
                </p>
              </div>
            </div>
              </div>
              
            </Flicking>
            
</template>
