title: What should be order of life cycles, variables, functions Nuxt Composition API?
body: <p>I am frontend team member and we are creating web pages together by using Nuxt Composition Api. We want to write clean and well ordered codes together and we don't wanna face with much problems when we were reviewing codes. I think , biggest problem is order of primitive types, life cycles , functions, constants . In which order , we should write and what is best practice for this order.</p>
  <pre><code>&lt;script&gt;
  import { computed, onMounted, ref} from '@nuxtjs/composition-api';
  import { allNotificationsMarkAsRead } from '@/common/firebase/notificationsHelper';
  import { contentTypes, resizeSize } from '../constants';
  import { getCached } from '@/common/cache';
  import CmIcon from '@/components/icon/cm-icon';
  import CmCommentCard from '@/components/cards/notification-card/cm-comment-card';
  
  </code></pre>
  <p><strong>Components, constants, named functions follow this order when we imported anything</strong></p>
  <pre><code>Setup(){
      const { app, route, store, redirect, error } = useContext();
      const { newsDetailMetaTagData } = newsDetailMetaTag();
      const { setModalData, modalData, getModalData, galleryModalDetail } = useModal();
   
      const headlineClient = app.apolloProvider.clients.headline;
      const router = useRouter();
  
      const activeOrder = computed(() =&gt; store.state['detailPages'].activeOrder);
      const categoryName = computed(() =&gt; route.value.params.category);
  
      const detailedContent = ref([]);
      const modalRef = ref(null);
  
  </code></pre>
  <p><strong>ref or computed? Which one should come before? Thats problem</strong></p>
  <p><strong>Life cycles and Functions</strong></p>
  <pre><code>onMounted(() =&gt; { 
        isMounting.value = false;
      });
  
  onUpdated(() =&gt; {
     console.log(document.getElementById('count').textContent)
  })
  
  .. *and functions are written under life cycles*
  
  </code></pre>