Adds a better explanation for alignment section

doc/development/fe_guide/style_guide_js.md

@@ -311,6 +311,7 @@ A forEach will cause side effects, it will be mutating the array being iterated.
 
 #### Alignment
 1. Follow these alignment styles for the template method:
+  1. With more than one attribute, all attributes should be on a new line:
   ```javascript
     // bad
     <component v-if="bar"
@@ -327,9 +328,16 @@ A forEach will cause side effects, it will be mutating the array being iterated.
     <button class="btn">
       Click me
     </button>
+  ```
+  1. The tag can be inline if there is only one attribute:
+  ```javascript
+    // good
+      <component bar="bar" />
 
-    // if props fit in one line then keep it on the same line
-    <component bar="bar" />
+    // good
+      <component
+        bar="bar"
+        />
   ```
 
 #### Quotes
@@ -381,9 +389,12 @@ A forEach will cause side effects, it will be mutating the array being iterated.
     }
   ```
 
-1. Default key should always be provided if the prop is not required:
+1. Default key should be provided if the prop is not required.
+_Note:_ There are some scenarios where we need to check for the existence of the property.
+On those a default key should not be provided.
+
   ```javascript
-    // bad
+    // good
     props: {
       foo: {
         type: String,