message: Fix mobile profile screen showing old or duplicate data
diff: <script lang="ts">
  -import { computed, defineComponent, h, toRefs, useSlots } from 'vue';
  +import { computed, toRefs } from 'vue';
  import { Screen } from '../../../_common/screen/screen-service';
  const validOrder = ['main', 'left', 'right'];
  @@ -7,9 +7,10 @@ const validOrder = ['main', 'left', 'right'];
  function validateOrder(val: unknown) {
  return typeof val === 'string' && val.split(',').every(i => validOrder.includes(i));
  }
  +</script>
  -export default defineComponent({
  - props: {
  +<script lang="ts" setup>
  +const props = defineProps({
  xl: {
  type: Boolean,
  },
  @@ -24,10 +25,9 @@ export default defineComponent({
  default: 'main,left,right',
  validator: validateOrder,
  },
  - },
  - setup(props) {
  +});
  +
  const { xl, noLeft, noRight, order } = toRefs(props);
  - const slots = useSlots();
  const hasLeftColumn = computed(() => !noLeft.value && Screen.isLg);
  const hasRightColumn = computed(() => !noRight.value);
  @@ -56,47 +56,29 @@ export default defineComponent({
  ':' + order.value,
  ].join('')
  );
  -
  - return () => {
  - const left = slots['left']?.() ?? [];
  - const leftBottom = slots['left-bottom']?.() ?? [];
  - const main = slots['default']?.() ?? [];
  - const right = slots['right']?.() ?? [];
  -
  - const cols = {
  - left: hasLeftColumn.value
  - ? h('div', { key: `left:${keySuffix.value}`, class: '-left' }, [
  - ...left,
  - ...leftBottom,
  - ])
  - : undefined,
  -
  - main: h('div', { key: `main:${keySuffix.value}`, class: '-main' }, main),
  -
  - right: hasRightColumn.value
  - ? h('div', { key: `right:${keySuffix.value}`, class: '-right' }, [
  - ...(shouldCombineColumns.value ? left : []),
  - ...right,
  - ...(shouldCombineColumns.value ? leftBottom : []),
  - ])
  - : undefined,
  - };
  -
  - const orders = order.value.split(',') as (keyof typeof cols)[];
  - const orderedCols = orders.map(i => cols[i]);
  -
  - return h(
  - 'div',
  - {
  - class: classes.value,
  - },
  - [h('div', { class: '-row' }, orderedCols)]
  - );
  - };
  - },
  -});
  </script>
  +<template>
  + <div :class="classes">
  + <div class="-row">
  + <div v-if="hasLeftColumn" :key="`left:${keySuffix}`" class="-left">
  + <slot name="left" />
  + <slot name="left-bottom" />
  + </div>
  +
  + <div :key="`main:${keySuffix}`" class="-main">
  + <slot name="default" />
  + </div>
  +
  + <div v-if="hasRightColumn" :key="`right:${keySuffix}`" class="-right">
  + <slot v-if="shouldCombineColumns" name="left" />
  + <slot name="right" />
  + <slot v-if="shouldCombineColumns" name="left-bottom" />
  + </div>
  + </div>
  + </div>
  +</template>
  +
  <style lang="stylus" scoped>
  $-main-max-width = 650px
  