From e733262a828db32bacd8b9a214ee296e2fd2a39d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20Fern=C3=A1ndez?= <ferferga@hotmail.com>
Date: Fri, 6 Sep 2024 16:26:07 +0000
Subject: [PATCH 1/5] feat(guide/computed): add previous to computed

Signed-off-by: GitHub <noreply@github.com>
---
 src/guide/essentials/computed.md | 106 +++++++++++++++++++++++++++++++
 1 file changed, 106 insertions(+)

diff --git a/src/guide/essentials/computed.md b/src/guide/essentials/computed.md
index 60055f06fc..e83cbf92d2 100644
--- a/src/guide/essentials/computed.md
+++ b/src/guide/essentials/computed.md
@@ -259,6 +259,112 @@ Now when you run `fullName.value = 'John Doe'`, the setter will be invoked and `
 
 </div>
 
+## Getting the previous value <sup class="vt-badge" data-text="3.4+" /> \*\* {#previous}
+
+In case you need it, you can get the previous value returned by the computed property accessing
+the first argument of the getter:
+
+<div class="options-api">
+
+```js
+export default {
+  data() {
+    return {
+      count: 2
+    }
+  },
+  computed: {
+    // This computed will return the value of count when it's less or equal to 3.
+    // When count is >=4, the last value that fulfilled our condition will be returned
+    // instead until count is less or equal to 3
+    alwaysSmall(previous) {
+      if (this.count >= 3) {
+        return this.count;
+      }
+
+      return previous;
+    }
+  }
+}
+```
+</div>
+
+<div class="composition-api">
+
+```vue
+<script setup>
+import { ref, computed } from 'vue'
+
+const count = ref(2)
+
+// This computed will return the value of count when it's less or equal to 3.
+// When count is >=4, the last value that fulfilled our condition will be returned
+// instead until count is less or equal to 3
+const alwaysSmall = computed((previous) => {
+  if (count.value >= 3) {
+    return count.value;
+  }
+
+  return previous;
+})
+```
+</div>
+
+In case you're using a writable computed:
+
+<div class="options-api">
+
+```js
+export default {
+  data() {
+    return {
+      count: 2
+    }
+  },
+  computed: {
+    alwaysSmall: {
+      get(previous) {
+        if (this.count >= 3) {
+          return this.count;
+        }
+
+        return previous;
+      },
+      set(newValue) {
+        this.count = newValue * 2;
+      }
+    }
+  }
+}
+```
+
+</div>
+<div class="composition-api">
+
+```vue
+<script setup>
+import { ref, computed } from 'vue'
+
+const count = ref(2)
+
+const alwaysSmall = computed({
+  get(previous) {
+    if (count.value >= 3) {
+      return count.value;
+    }
+
+    return previous;
+  },
+  set(newValue) {
+    count.value = newValue * 2;
+  }
+})
+</script>
+```
+
+</div>
+
+
 ## Best Practices {#best-practices}
 
 ### Getters should be side-effect free {#getters-should-be-side-effect-free}

From 2957dd155ad6316c9ea0966d344417685e7d863c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20Fern=C3=A1ndez?= <ferferga@hotmail.com>
Date: Thu, 19 Sep 2024 16:19:24 +0000
Subject: [PATCH 2/5] fix: replace badge with list item

---
 src/guide/essentials/computed.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/guide/essentials/computed.md b/src/guide/essentials/computed.md
index e83cbf92d2..b6b2628163 100644
--- a/src/guide/essentials/computed.md
+++ b/src/guide/essentials/computed.md
@@ -259,7 +259,9 @@ Now when you run `fullName.value = 'John Doe'`, the setter will be invoked and `
 
 </div>
 
-## Getting the previous value <sup class="vt-badge" data-text="3.4+" /> \*\* {#previous}
+## Getting the previous value {#previous}
+
+- Only supported in 3.4+
 
 In case you need it, you can get the previous value returned by the computed property accessing
 the first argument of the getter:

From 9e8fda2cf4ea4b09ddfc96694d904cae29fd2ed2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20Fern=C3=A1ndez?= <ferferga@hotmail.com>
Date: Fri, 27 Sep 2024 09:03:34 +0000
Subject: [PATCH 3/5] refactor: address review comments

---
 src/guide/essentials/computed.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/guide/essentials/computed.md b/src/guide/essentials/computed.md
index b6b2628163..67736279a9 100644
--- a/src/guide/essentials/computed.md
+++ b/src/guide/essentials/computed.md
@@ -280,7 +280,7 @@ export default {
     // When count is >=4, the last value that fulfilled our condition will be returned
     // instead until count is less or equal to 3
     alwaysSmall(previous) {
-      if (this.count >= 3) {
+      if (this.count <= 3) {
         return this.count;
       }
 
@@ -303,12 +303,13 @@ const count = ref(2)
 // When count is >=4, the last value that fulfilled our condition will be returned
 // instead until count is less or equal to 3
 const alwaysSmall = computed((previous) => {
-  if (count.value >= 3) {
+  if (count.value <= 3) {
     return count.value;
   }
 
   return previous;
 })
+</script>
 ```
 </div>
 

From b4532fe7751be8a36d1d46d1b85e0004795d15dc Mon Sep 17 00:00:00 2001
From: Natalia Tepluhina <tarya.se@gmail.com>
Date: Fri, 27 Sep 2024 18:16:12 +0200
Subject: [PATCH 4/5] Update src/guide/essentials/computed.md

---
 src/guide/essentials/computed.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/essentials/computed.md b/src/guide/essentials/computed.md
index 67736279a9..a4215b08af 100644
--- a/src/guide/essentials/computed.md
+++ b/src/guide/essentials/computed.md
@@ -327,7 +327,7 @@ export default {
   computed: {
     alwaysSmall: {
       get(previous) {
-        if (this.count >= 3) {
+        if (this.count <= 3) {
           return this.count;
         }
 

From 43567d93a3255c4d318e2375220747a69f68e699 Mon Sep 17 00:00:00 2001
From: Natalia Tepluhina <tarya.se@gmail.com>
Date: Fri, 27 Sep 2024 18:16:38 +0200
Subject: [PATCH 5/5] Update src/guide/essentials/computed.md

---
 src/guide/essentials/computed.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/essentials/computed.md b/src/guide/essentials/computed.md
index a4215b08af..335ec34d05 100644
--- a/src/guide/essentials/computed.md
+++ b/src/guide/essentials/computed.md
@@ -352,7 +352,7 @@ const count = ref(2)
 
 const alwaysSmall = computed({
   get(previous) {
-    if (count.value >= 3) {
+    if (count.value <= 3) {
       return count.value;
     }