How can i use $ref in json-schema with vue-json-schema-form?

Question

I am trying to generate a form which can have multiple recursive fields. I have used https://codepen.io/crickford/pen/ZmJqwd this demo (I am not using any custom component). Whenever i am using "$ref" it ignores it. I am using vue-json-schema-form. Here is the link of github https://github.com/crickford/vue-json-schema-form. Even if i use "$ref":"#" it's not working.

My Json-schema is valid. Even if i replace the following schema in codepen i don't get expected result, where as it is giving me proper output by editing schema property of the source in this link http://www.alpacajs.org/docs/api/recursive-references.html

I don't know where am I mistaking !! At least in codepen attached schema code should work. Kindly guide me or share working demo fiddle with me. Thanks in advance.

Here is my schema:

   {
    "type": "object",
    "title": "",
    "properties": {
        "Namespace": {
            "type": "string",
            "title": "Namespace ",
            "attrs": {
                "placeholder": "Namespace",
                "title": "Please enter Namespace"
            }
        },
        "Name": {
            "type": "string",
            "title": "Display Name : ",
            "attrs": {
                "placeholder": "Display Name",
                "title": "Please enter Display name"
            }
        },
        "SubSteps": {
            "type": "array",
            "title": "SubSteps",
            "items": {
                "type": "object",
                "title": "Sub step",
                "$ref": "#/definitions/SubSteps"
            }
        }
    },
    "definitions": {
        "SubSteps": {
            "type": "object",
            "title": "SubStep item",
            "properties": {
                "Namespace": {
                    "type": "string",
                    "title": "Namespace ",
                    "attrs": {
                        "placeholder": "Namespace",
                        "title": "Please enter Namespace"
                    }
                },
                "Name": {
                    "type": "string",
                    "title": "Display Name : ",
                    "attrs": {
                        "placeholder": "Display Name",
                        "title": "Please enter Display name"
                    }
                },
                "SubSteps": {
                    "type": "array",
                    "title": "SubSteps",
                    "items": {
                        "type": "object",
                        "title": "Sub step",
                        "$ref": "#/definitions/SubSteps"
                    }
                }
            }
        }
    },
    "required": [
        "Name"
    ]
}

Answer 1

It doesn't look like the library in question supports the use of $ref. Therefore you would have to submit an issue and / or pull request to add the functionality you want.