Prefer having synchronous computed properties JS-0607

Computed properties should be synchronous. Asynchronous actions inside them may not work as expected and can lead to unexpected behavior, that's why it is recommended to avoid using asynchronous actions.

Bad Practice

<script>
export default {
  computed: {
    // Asynchronous Call using promises
    pro () {
      return Promise.all([new Promise((resolve, reject) => {})])
    },
    // Asynchronous Call using async/await
    foo1: async function () {
      return await someFunc()
    },
    // Asynchronous Call using thenable
    bar () {
      return fetch(url).then(response => {})
    },

    // Asynchronous Call using async browser functions
    tim () {
      setTimeout(() => { }, 0)
    },
    inter () {
      setInterval(() => { }, 0)
    },
    anim () {
      requestAnimationFrame(() => {})
    }
}
</script>

Recommended

<script>
export default {
  computed: {
    prop () {
      try {
        return someFunc()
      } catch (e) {
        return 0
      }
    },
}
</script>