useBreakpoint causes unnecessary rerenders depending on its usage

[CapitaineToinon]

Describe the bug

It seems that two different ways to get the same information through the composable useBreakpoint yield inconsistent renders on the application.

This first example will give me the correct value immediately.

const { isGreater } = useBreakpoints(breakpointsTailwind);

const columns = computed(() => {
  if (isGreater('is2xl')) return 6;
  if (isGreater('lg')) return 4;
  if (isGreater('md')) return 3;
  if (isGreater('sm')) return 2;
  return 1;
});

But this example will have the columns variable to 1 at first, then switch to whatever it actually should be, causing a rerender.

const { sm, md, lg, '2xl': is2xl } = useBreakpoints(breakpointsTailwind);

const columns = computed(() => {
  if (is2xl.value) return 6;
  if (lg.value) return 4;
  if (md.value) return 3;
  if (sm.value) return 2;
  return 1;
});

Could be related to #1596 and #1591? Anyway I think the inconsistent behavior is a problem and should be fixed. Let me know what you think about it.

Regardless, thanks for the awesome library. ✌️

Reproduction

https://play.vueuse.org/#N4IgDghgxg1hDmBTAziAXAbVAOwgW0XRADcBXRAWgBNE8BLEAGhGQHtSAnKQtEU7MDHhMQNZFA50wAFzqtsRAGrkABABFadFQAoAFhAA2AMxV1sKgGIdE2KLoCUp5CogqaxRAdZgz8FaVkDOmkATxcDLwB3ZxD2FWlWFUjJaUQVAFVsOg8OZEMVZTSAGToAIw4ISRQVI1YOAtUAJhUAMhUAZhFOAyJdaWkwZDQAemH+QXgAOihWPGGyShp6YaDS4bMaAA9JvAArVABfRhx8HhAAAQXSZERh5H1rKhE2Tm4icaERMQkpWXkiADKD0QVAaiHSN38gWCdBQky6HB6vD6AyGow+Uxmc0u5Gut3ulRB5wAnJMAAzk9bYLY7fYgI4nAhEHGIPHDGbWZ7sLhnDFfFA-GRyBS8ADCrAiiCgf3MrBMKBu2Fk+UKKnFeDArGQMPkGWhshQCKRIBRgxGYwEQmms2GLLZHMQJPJlI2iG2e0OAF1mEY6AZDWhQABBMBgSYLdCgVIagwQVJEAA8VGyKngkioAF4ADogAB+qYgYAoABYcyowLHuNmQDMlTZpBRuHX6sFaMhG-XEBwy7pq+JrDYy7UldW8PJWDmAHxZ8wqJPZaezlQqABKNho3aXc7MYACKmIFDHNAM1eIdG1pX9ZdCYEQ1bsUpgpVYmzLw0Xy4Tw2TxA-c+jFZxmkB50EYp7nmUV4gH+n4AOKsKwoLvjOy6fgAQhASF-l+AGxqki5fj+k7PIK0hEHQGp1NIKjACo1gmAcNQcLMKg5gsOYzhRmocNR8GIUxLE5pMwx8VQ4bkBxWSUTxKgYaCRjMXgrEgMJcniYgkm1sg1Fnhe-oqBmdGIEY2jSBw5D2PSzCiepkYgLhQGJj+NTyNIo7jmWpTwNWQTwH0FAAKxkmSbiVDAaBUGFgXBUO-qbNW+YzAY15um5Ob+kY0hlmA1aNJ5dQbtWzH8DQVBTihc66AAjJOolftV2FgNYk7ALRujngkHBhAcBxfk1iAEd+C4kZIMjkdJ1G0Viu6pKCjEKSxADkCyLZxE00f4NxodYEAwJqZjSMgjAqOUiC7ftSrIAAKhAfqRBsx14muRgABIdXU3UCUpi12jc7J1Igq3YDOWmTU4sE7ak9SMYZeLbWde2sAdyDaKd51I5dN13Rs9gANwziD8jaSoSWkHg2DOIZ00BCC2jaI4GaTjRFWgTo54Q2dUPaIt56NJsBiLfYjjWNInDmAAbPjs6s9o7OQ123MGPAgvC4goscOYxZS8uMty5zCuLXgVAq0Z6vmO02umCYsvIBzQEcNzyB4CbItiyojSW67GsqFVUsHHjBO2ETYPtdpH0qDDm2IM9b1h112ik+TyD2DOVkgGpEaBvZtCAfGvDzsQLkjjmY7YBOIAnd56V0H5DZBSFkUcOFjcwNFZKxW6CUkxKKWbGlIAZVlFc5TmeUV8+HCFTmxXUiC5WzgmDVyfVNUVQm-UtW171dRHvXDBvM6EcNzD9r843cWD1OzRHX0qMt5BA1xVEbXDO2I8jx1o+-mO3QY93Uo9G4Mdt6fQWt9X6twHRA0JhTMGTtjpG2OkrY6i0+YCzQE4NBN9YZbTfhdQ6qM8EY0OljP+OMpYwOJonCmBlu4ahplQOmDMmbABZtbXm-NwyGAsqbN2ks2E6CVlwgwPCvaa0tjLI2wjRFqzdhbAR2gnbSMQKrM27tPayO9r7Gc-sKFB1gRtUOnVPo4OjsZWOxiE4SjJhTFOCgeoHCAA

System Info

System:
    OS: macOS 12.5.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 792.34 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.7.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.15.0 - /usr/local/bin/npm
    Watchman: 2022.08.29.00 - /usr/local/bin/watchman
  Browsers:
    Brave Browser: 90.1.24.82
    Chrome: 104.0.5112.101
    Firefox: 103.0.1
    Firefox Developer Edition: 82.0
    Safari: 15.6.1

Used Package Manager

yarn

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.